diff options
author | David Kaufmann <mail@davidkaufmann.de> | 2022-01-20 01:54:45 +0300 |
---|---|---|
committer | David Kaufmann <mail@davidkaufmann.de> | 2022-01-20 02:05:59 +0300 |
commit | 1be343792cec9078d4980b625833072d350e1c8e (patch) | |
tree | f358bb1141784ae44a9d7d8b0d1823c5d8ed5be2 | |
parent | 9911a91f3bbb5cfa8fffbcf4d0b7ca2964e31889 (diff) |
fix 'prefers-color-scheme: dark' overriding light theme
removes media query 'prefers-color-scheme: dark', because it overrides
light theme root variables. added new localstorage variable that checks
for preference and if it has been set to dark before. not adding this
check would result in random theme switches.
-rw-r--r-- | static/css/main.css | 15 | ||||
-rw-r--r-- | static/js/dark-mode.js | 8 |
2 files changed, 8 insertions, 15 deletions
diff --git a/static/css/main.css b/static/css/main.css index 3ce386f..e4e5973 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -64,21 +64,6 @@ --inline-cd-color: #37342E; } -@media (prefers-color-scheme: dark) { - :root { - --bg-color: #181714; - --txt-color: #FFEECA; - --line-color: #433F37; - --fn-color: #534F47; - --ft-txt-color: #FFEECA; - --lk-color: #8192AE; - --hover-color: #B1A184; - --bq-color: #75271E; - --tb1-color: #47443B; - --inline-cd-color: #37342E; - } -} - html { background-color: var(--bg-color); } diff --git a/static/js/dark-mode.js b/static/js/dark-mode.js index acea8f8..bffba78 100644 --- a/static/js/dark-mode.js +++ b/static/js/dark-mode.js @@ -30,3 +30,11 @@ function switchTheme() { } toggleSwitch.addEventListener('click', switchTheme, false); + +window.onload = function() { + if (window.matchMedia("(prefers-color-scheme: dark)").matches && !localStorage.getItem('prefers-color-scheme-dark')) { + localStorage.setItem('theme', 'light'); + switchTheme(); + localStorage.setItem('prefers-color-scheme-dark', true); + } +}; |