privacyguides/privacytools.io
Archived
1
0
Fork 0
Code Issues 304 Pull Requests 47 Activity

Reduce flickering with dark/light theme (#1241)

Browse Source
This commit was merged in pull request #1241.
This commit is contained in:
Dawid Potocki
2019-08-31 22:30:53 +00:00
committed by nitrohorse
parent 0276f52ed2
commit 24412dcf8f
4 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/js/applytheme.js Normal file
View File

@@ -0,0 +1,6 @@
if (localStorage.getItem("colorScheme") === "dark") {
document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
}
else if (localStorage.getItem("colorScheme") === "light") {
document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
}

39
assets/js/main.js
View File

@@ -29,29 +29,31 @@ function navSectionsClose(event) {
// Dark/Light color scheme switch button
document.querySelector("#nav-switch-theme").style.display = "inline"
if (localStorage.getItem("colorScheme") === "dark") {
document.querySelector("#dark-css").removeAttribute("media"); // Set dark theme
}
else if (localStorage.getItem("colorScheme") === "light") {
document.querySelector("#dark-css").setAttribute("media", "invalid"); // Set light theme
}
document.querySelector("#nav-switch-theme").style.display = "inline";
function changeColorScheme() {
// Use whatever users want
if (localStorage.getItem("colorScheme") === "dark") {
// Change to light theme
// by setting invalid media it will just not apply CSS for anyone
document.querySelector("#dark-css").setAttribute("media", "invalid");
localStorage.setItem("colorScheme", "light");
if (window.matchMedia("(prefers-color-scheme: dark)").matches === false) {
document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
localStorage.removeItem("colorScheme");
} else {
// by setting invalid media it will just not apply CSS for anyone
document.querySelector("#dark-css").setAttribute("media", "invalid");
localStorage.setItem("colorScheme", "light");
}
}
// Change to dark theme
else if (localStorage.getItem("colorScheme") === "light") {
// Change to dark theme
// media was set to prefers-color-scheme: dark
document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");;
if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
localStorage.removeItem("colorScheme");
} else {
// media was set to prefers-color-scheme: dark
document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");
}
}
// Just use whatever browsers want
@@ -59,11 +61,10 @@ function changeColorScheme() {
// Change to light Theme
document.querySelector("#dark-css").setAttribute("media", "invalid");
localStorage.setItem("colorScheme", "light");
}
else {
} else {
// Change to dark theme
document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");;
localStorage.setItem("colorScheme", "dark");
}
}