-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Update dark mode detection Updated dark mode detection - Watches for browser mode change - Watches for toggle change Either change sets the scheme variable in localStorage * Move dark mode scheme toggle to dark.css Move dark mode scheme toggle to dark.css (was in main.css) * Light mode toggle to not require .light class Changed the light mode toggle to not require .light class, as the counterpart only applies if html.dark is present. * Re-enable <html> opening tag with dark mode Was producing broken HTML _(</html> end tag but no <html> start tag)_ * Enable dark mode toggle on nav Enabling dark mode toggle on nav * Missed the color/fill dark class a.dark svg -> a svg fill & color add !important * This element does not exist by default and will NullPointer itself if site.Params.mode is unset * dark mode (once enabled) renders code blocks unreadable * Applied changes from jslint * Updated screenshot
- Loading branch information
Showing
7 changed files
with
62 additions
and
58 deletions.
There are no files selected for viewing
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,44 @@ | ||
| document.addEventListener("DOMContentLoaded", function(){ | ||
| var toggle = document.getElementById("scheme-toggle"); | ||
| "use strict"; | ||
|
|
||
| var scheme = "light"; | ||
| var savedScheme = localStorage.getItem("scheme"); | ||
| function toggleDarkMode() { | ||
| var theme = localStorage.getItem("scheme"), | ||
| toggle = document.getElementById("scheme-toggle"), | ||
| container = document.getElementsByTagName("html")[0]; | ||
|
|
||
| var container = document.getElementsByTagName("html")[0]; | ||
| var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; | ||
|
|
||
| if (prefersDark) { | ||
| scheme = "dark"; | ||
| } | ||
| if (theme === "dark") { | ||
| toggle.innerHTML = feather.icons.sun.toSvg(); | ||
| container.className = "dark"; | ||
| } else { | ||
| toggle.innerHTML = feather.icons.moon.toSvg(); | ||
| container.className = ""; | ||
| } | ||
| } | ||
|
|
||
| if(savedScheme) { | ||
| scheme = savedScheme; | ||
| } | ||
| document.addEventListener("DOMContentLoaded", function () { | ||
| const globalDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; | ||
| const localMode = localStorage.getItem("scheme"); | ||
| const mode = document.getElementById("scheme-toggle"); | ||
|
|
||
| if (toggle) { | ||
| if(scheme == "dark") { | ||
| darkscheme(toggle, container); | ||
| } else { | ||
| lightscheme(toggle, container); | ||
| if (globalDark && (localMode === null)) { | ||
| localStorage.setItem("scheme", "dark"); | ||
| } | ||
|
|
||
| toggle.addEventListener("click", () => { | ||
| if (toggle.className === "light") { | ||
| darkscheme(toggle, container); | ||
| } else if (toggle.className === "dark") { | ||
| lightscheme(toggle, container); | ||
| } | ||
| }); | ||
| } | ||
| }); | ||
| if (mode !== null) { | ||
| toggleDarkMode(); | ||
|
|
||
| window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", function (event) { | ||
| if (event.matches) { | ||
| localStorage.setItem("scheme", "dark"); | ||
| } else { | ||
| localStorage.setItem("scheme", "light"); | ||
| } | ||
|
|
||
| function darkscheme(toggle, container) { | ||
| localStorage.setItem("scheme", "dark"); | ||
| toggle.innerHTML = feather.icons.sun.toSvg(); | ||
| toggle.className = "dark"; | ||
| container.className = "dark"; | ||
| } | ||
| toggleDarkMode(); | ||
| }); | ||
|
|
||
| function lightscheme(toggle, container) { | ||
| localStorage.setItem("scheme", "light"); | ||
| toggle.innerHTML = feather.icons.moon.toSvg(); | ||
| toggle.className = "light"; | ||
| container.className = ""; | ||
| } | ||
| mode.addEventListener("click", function () { | ||
| localStorage.setItem("scheme", document.documentElement.classList.contains('dark') ? "light" : "dark"); | ||
| toggleDarkMode(); | ||
| }); | ||
| } | ||
| }); |