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

Reduce flickering with dark/light theme (#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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/scripts.html
View File

@ -2,7 +2,7 @@
<script src="/assets/js/popper.min.js?v=4"></script>
<script src="/assets/js/bootstrap.min.js?v=4"></script>
<script src="/assets/js/sortable.min.js?v=4"></script>
<script src="/assets/js/main.js?v=2"></script>
<script src="/assets/js/main.js?v=3"></script>
<!--
Matomo is the leading open-source analytics platform:

1
_layouts/minimal.html
View File

@ -2,6 +2,7 @@
<html lang="en">
{% include head.html %}
<body data-spy="scroll" data-target="#navbar">
<script src="/assets/js/applytheme.js?v=1"></script>
<header>
{% include nav.html %}
<div id="top" class="py-4"></div>

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");
}
}