alexohneander/alexohneander-zola
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

✨ feat: change default theme to OS default

Browse Source 
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
This commit is contained in:
welpo 2023-02-15 20:36:26 +01:00
parent 2f4d0658d8
commit af80aef00c
No known key found for this signature in database
GPG Key ID: A2F978CF4EC1F5A6
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/js/main.js
View File

@ -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