feat: change default theme to OS default

Update the theme switcher code to set the default theme to the OS
default, rather than the "light" theme. This provides a more seamless
user experience for users whose OS is set to a dark mode. The current
theme setting in local storage will still be respected if present. This
change was made to improve the accessibility and usability.

Fixes #38
main
welpo 2 years ago
parent 2f4d0658d8
commit af80aef00c
No known key found for this signature in database
GPG Key ID: A2F978CF4EC1F5A6

@ -1,14 +1,15 @@
//https://codepen.io/codeorum/pen/bGedRJO
var themeSwitcher = document.querySelector('.theme-switcher input'); var themeSwitcher = document.querySelector('.theme-switcher input');
var currentTheme = localStorage.getItem('theme'); 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) { if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme); document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') { if (currentTheme === 'dark') {
themeSwitcher.checked = true; themeSwitcher.checked = true;
} }
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-theme', 'dark');
themeSwitcher.checked = true;
} }
// switch between themes // switch between themes

Loading…
Cancel
Save