From 1be343792cec9078d4980b625833072d350e1c8e Mon Sep 17 00:00:00 2001 From: David Kaufmann Date: Wed, 19 Jan 2022 23:54:45 +0100 Subject: 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. --- static/css/main.css | 15 --------------- 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); + } +}; -- cgit v1.2.3