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

Reduce flickering with dark/light theme #1241

Merged
dawidpotocki merged 1 commits from reduceflicker into master 2019-08-31 22:30:55 +00:00
Conversation 6 Commits 1 Files Changed 4
+28 -20
4 changed files with 28 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_includes/scripts.html
+1 -1
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:
_layouts/minimal.html
+1
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>
assets/js/applytheme.js
+6
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
}
assets/js/main.js
+20 -19
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");
}
}