diff options
author | Ilija Eftimov <ieftimov@pm.me> | 2020-04-21 11:51:51 +0300 |
---|---|---|
committer | Ilija Eftimov <ieftimov@pm.me> | 2020-04-21 11:51:51 +0300 |
commit | 8739bbc8683701ea9e58fe038c9c4eb95dcaab60 (patch) | |
tree | 359307ce99e312b666828f88afdc96d161accf03 /static | |
parent | 4ab319f9c239ae3736f83c8a1c402a69dfdd05fa (diff) |
Fix dark theme switching by adding dark class to html tag
Diffstat (limited to 'static')
-rw-r--r-- | static/css/dark.css | 76 | ||||
-rw-r--r-- | static/js/main.js | 18 |
2 files changed, 47 insertions, 47 deletions
diff --git a/static/css/dark.css b/static/css/dark.css index 6312c4b..1b4a2bd 100644 --- a/static/css/dark.css +++ b/static/css/dark.css @@ -1,66 +1,66 @@ -body { - color: #ddd; - background-color: #000; +html.dark body { + color: #ddd; + background-color: #000; } -::-moz-selection { - background: #9375fd; - color: #fff; - text-shadow: none +html.dark ::-moz-selection { + background: #9375fd; + color: #fff; + text-shadow: none } -::selection { - background: #9375fd; - color: #fff; - text-shadow: none +html.dark ::selection { + background: #9375fd; + color: #fff; + text-shadow: none } -hr { - border-color: #333; +html.dark hr { + border-color: #333; } -blockquote { - border-color: #ddd; +html.dark blockquote { + border-color: #ddd; } -h1,h2,h3,h4,h5,h6 { - color: #ddd; +html.dark h1,h2,h3,h4,h5,h6 { + color: #ddd; } -a,a:hover { - color: #9375fd; - text-decoration: none; +html.dark a,a:hover { + color: #9375fd; + text-decoration: none; } -table tbody tr:nth-of-type(even) { +html.dark table tbody tr:nth-of-type(even) { background-color: rgba(255, 255, 255, 0.15); } -.site-description a, -.site-description a:hover { - color: #ddd; - text-decoration: underline; +html.dark .site-description a, +html.dark .site-description a:hover { + color: #ddd; + text-decoration: underline; } -a:hover { - opacity: 0.8; +html.dark a:hover { + opacity: 0.8; } -.post-tags .tags a { - border: 1px solid #ddd; - color: #ddd; +html.dark .post-tags .tags a { + border: 1px solid #ddd; + color: #ddd; } -.site-title a { - color: #ddd; - text-decoration: none !important; +html.dark .site-title a { + color: #ddd; + text-decoration: none !important; } -.header nav, -.footer { - border-color: #333; +html.dark .header nav, +html.dark .footer { + border-color: #333; } -.highlight { - background-color: #333; +html.dark .highlight { + background-color: #333; } diff --git a/static/js/main.js b/static/js/main.js index 14fc77b..113c9b6 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", function(){ var scheme = "light"; var savedScheme = localStorage.getItem("scheme"); - var darkScheme = document.getElementById("dark-scheme"); + var container = document.getElementsByTagName("html")[0]; var prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; if (prefersDark) { @@ -16,30 +16,30 @@ document.addEventListener("DOMContentLoaded", function(){ } if(scheme == "dark") { - darkscheme(toggle, darkScheme); + darkscheme(toggle, container); } else { - lightscheme(toggle, darkScheme); + lightscheme(toggle, container); } toggle.addEventListener("click", () => { if (toggle.className === "light") { - darkscheme(toggle, darkScheme); + darkscheme(toggle, container); } else if (toggle.className === "dark") { - lightscheme(toggle, darkScheme); + lightscheme(toggle, container); } }); }); -function darkscheme(toggle, darkScheme) { +function darkscheme(toggle, container) { localStorage.setItem("scheme", "dark"); toggle.innerHTML = feather.icons.sun.toSvg(); toggle.className = "dark"; - darkScheme.disabled = false; + container.className = "dark"; } -function lightscheme(toggle, darkScheme) { +function lightscheme(toggle, container) { localStorage.setItem("scheme", "light"); toggle.innerHTML = feather.icons.moon.toSvg(); toggle.className = "light"; - darkScheme.disabled = true; + container.className = ""; } |