feat: add automatic dark and light mode detect #26
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for hugo-blog-awesome ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
hugo-sid
approved these changes
Apr 28, 2023
There was a problem hiding this comment.
Thanks @kusyka911, for adding automatic light/dark mode detection feature to this theme.
I appreciate your desire to improve this theme.
Have a good day. Happy blogging :)
| @@ -2,7 +2,7 @@ | |||
| <html lang="{{ .Site.LanguageCode }}"> | |||
| {{- partial "head.html" . -}} | |||
|
|
|||
| <body data-theme="{{ .Site.Params.defaultColor }}" class="notransition"> | |||
| <body data-theme="{{ .Site.Params.defaultColor | default "auto" }}" class="notransition"> | |||
There was a problem hiding this comment.
@kusyka911, I like what you have done here: setting the default color mode to auto.
| body[data-theme="dark"] { | ||
| color: $dark-text-base-color; | ||
| background-color: $dark-black; | ||
| @mixin dark-mode { |
| if (lsState) return lsState; | ||
|
|
||
| let state; | ||
| switch (config) { |
There was a problem hiding this comment.
I feel, using switch/case is a nice idea for this particular use case (color theme change).
|
I have added documentation regarding this here: hugo-blog-awesome/exampleSite/config.toml Lines 47 to 53 in ab263dd |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What problem does this PR solve?
Automatically detect user's theme preferences from OS settings.
Is this PR adding a new feature?
site configuration:
You may also need to clear your current settings in browser's local storage or use incognito mode.
When there is no preferred theme color set by site owner, and by site user, current theme will be automatically detected based on user's OS settings.
If site owner set preferred color scheme to
darkorlightit will be used by default.If site user changed preferred color scheme at least one, it will be saved in local storage and this value will be used until it is cleared manually.
In case of ruining site in JS disabled environment default color scheme will be detected automatically by CSS media query and can-not be set by the Site owner. Theme switcher button will not work for user because JS is required for it.
Is this PR related to any issue or discussion?
PR Checklist