docs: inject dark mode #1100
docs: inject dark mode #1100
Conversation
Signed-off-by: Hrittik Roy <[email protected]>
|
@richburroughs felt this is important. What do you think? |
|
Hey yes I think it's great to honor people's local settings for dark/light mode :) |
|
Oh, @hrittikhere, I forgot to ask, were you able to test this? Or does that still need to get done? |
|
Hey @richburroughs However, in this page and few in the
|
|
Pulling down the server. I reccomend you test it locally once :) |
|
Hey @hrittikhere , thanks for this PR. We can consider merging this if you can fix the existing "white gap" issue that you pointed above. |
|
@ishankhare07 I was away on a vaccination, so I didn't get time to look into it. Thanks for the suggestion, and I have added the change, and it looks good. LMK what you think: CC: @richburroughs
|
|
Hey @ishankhare07, I'm just wondering about the merge pipeline. Can you also let me know about the deployment process after the merge is complete? |
There was a problem hiding this comment.
Hey @hrittikhere 👋 ,
I just tested your changes in Safari on macOS Venture 13.5, and the scroll bar is white + the "Join us on Slack" and GitHub buttons in the top bar do not adjust to the color scheme and are hard to see, as marked in the screenshot.
Regarding the scroll bar, you might have to look into either ::-webkit-scrollbar or color-scheme: light dark (source: ionic-team/ionic-framework#20921 (comment) + https://dev.to/okikio/psa-add-dark-mode-to-your-sites-or-at-least-let-the-browsers-do-it-for-you-18hi)
If those two changes are in, this PR should be ready.
Once the docs get merged onto the main branch, a GitHub action is triggered, which builds the docs and then deploys the build output to Netlify, as that's where the docs are hosted. |
|
Thanks for the suggestion @ThomasK33 :) I have gone through them, and now they look good on my end. Do you mind testing and letting me know how do they look on your side? While hovering: While not hovering over scroll bar: |
Signed-off-by: Thomas Kosiewski <[email protected]>
|
Welcome and thanks for the help 🙏 |
What issue type does this pull request address? (keep at least one, remove the others)
/kind documentation
What does this pull request do? Which issues does it resolve? (use
resolves #<issue_number>if possible)resolves #
Adds the dark mode to the documentation. The provided code snippet describes a color mode configuration with three properties. The defaultMode is set to 'light', indicating that the default color mode is set to a light theme. The disableSwitch property is set to false, allowing users to switch between different color modes. The respectPrefersColorScheme property is set to true, which means the color mode will respect the user's preference specified in their operating system or browser settings. Overall, this configuration ensures that the default color mode is light, users can switch between color modes, and the color mode will adapt to the user's preferred color scheme if specified.