privacyguides/privacyguides.org
1
0
Fork 0
mirror of https://github.com/privacyguides/privacyguides.org.git synced 2025-10-31 19:46:34 +00:00
Code Issues Activity

Reduce flickering with dark/light theme (#1241)

Browse Source
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

2
_includes/scripts.html
View File

@@ -2,7 +2,7 @@
<script src="/assets/js/popper.min.js?v=4"></script> <script src="/assets/js/popper.min.js?v=4"></script>
<script src="/assets/js/bootstrap.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/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: Matomo is the leading open-source analytics platform:

1
_layouts/minimal.html
View File

@@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
{% include head.html %} {% include head.html %}
<body data-spy="scroll" data-target="#navbar"> <body data-spy="scroll" data-target="#navbar">
<script src="/assets/js/applytheme.js?v=1"></script>
<header> <header>
{% include nav.html %} {% include nav.html %}
<div id="top" class="py-4"></div> <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 // Dark/Light color scheme switch button
document.querySelector("#nav-switch-theme").style.display = "inline" 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
}
function changeColorScheme() { function changeColorScheme() {
// Use whatever users want // Use whatever users want
if (localStorage.getItem("colorScheme") === "dark") { if (localStorage.getItem("colorScheme") === "dark") {
// Change to light theme // Change to light theme
// by setting invalid media it will just not apply CSS for anyone if (window.matchMedia("(prefers-color-scheme: dark)").matches === false) {
document.querySelector("#dark-css").setAttribute("media", "invalid"); document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
localStorage.setItem("colorScheme", "light"); 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") { else if (localStorage.getItem("colorScheme") === "light") {
// Change to dark theme if (window.matchMedia("(prefers-color-scheme: dark)").matches === true) {
// media was set to prefers-color-scheme: dark document.querySelector("#dark-css").setAttribute("media", "(prefers-color-scheme: dark)");
document.querySelector("#dark-css").removeAttribute("media"); localStorage.removeItem("colorScheme");
localStorage.setItem("colorScheme", "dark");; } else {
// media was set to prefers-color-scheme: dark
document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");
}
} }
// Just use whatever browsers want // Just use whatever browsers want
@@ -59,11 +61,10 @@ function changeColorScheme() {
// Change to light Theme // Change to light Theme
document.querySelector("#dark-css").setAttribute("media", "invalid"); document.querySelector("#dark-css").setAttribute("media", "invalid");
localStorage.setItem("colorScheme", "light"); localStorage.setItem("colorScheme", "light");
} } else {
else {
// Change to dark theme // Change to dark theme
document.querySelector("#dark-css").removeAttribute("media"); document.querySelector("#dark-css").removeAttribute("media");
localStorage.setItem("colorScheme", "dark");; localStorage.setItem("colorScheme", "dark");
} }
} }