From af80aef00c867459f28d268dc9d3708d65a408c3 Mon Sep 17 00:00:00 2001 From: welpo Date: Wed, 15 Feb 2023 20:36:26 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20change=20default=20theme=20?= =?UTF-8?q?to=20OS=20default=20Update=20the=20theme=20switcher=20code=20to?= =?UTF-8?q?=20set=20the=20default=20theme=20to=20the=20OS=20default,=20rat?= =?UTF-8?q?her=20than=20the=20"light"=20theme.=20This=20provides=20a=20mor?= =?UTF-8?q?e=20seamless=20user=20experience=20for=20users=20whose=20OS=20i?= =?UTF-8?q?s=20set=20to=20a=20dark=20mode.=20The=20current=20theme=20setti?= =?UTF-8?q?ng=20in=20local=20storage=20will=20still=20be=20respected=20if?= =?UTF-8?q?=20present.=20This=20change=20was=20made=20to=20improve=20the?= =?UTF-8?q?=20accessibility=20and=20usability.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #38 --- static/js/main.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/static/js/main.js b/static/js/main.js index 946380e..cf0b06c 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1,14 +1,15 @@ -//https://codepen.io/codeorum/pen/bGedRJO - var themeSwitcher = document.querySelector('.theme-switcher input'); var currentTheme = localStorage.getItem('theme'); -// check what is current theme right now and activate it +// detect the user's preferred color scheme and activate it if (currentTheme) { document.documentElement.setAttribute('data-theme', currentTheme); if (currentTheme === 'dark') { themeSwitcher.checked = true; } +} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + document.documentElement.setAttribute('data-theme', 'dark'); + themeSwitcher.checked = true; } // switch between themes