lapo.it
1// set dark theme depending on OS settings
2function setTheme(theme) {
3 if (theme == 'os') {
4 let prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
5 if (prefersDarkScheme.matches) {
6 theme = 'dark';
7 } else {
8 theme = 'light';
9 }
10 }
11 document.documentElement.style['color-scheme'] = theme;
12 document.querySelector('html').setAttribute('data-theme', theme);
13 // set the theme-color for iOS devices
14 let bgColor = getComputedStyle(document.documentElement).getPropertyValue('--main-bg-color');
15 let metaThemeColor = document.querySelector('meta[name=theme-color]');
16 metaThemeColor.setAttribute('content', bgColor);
17}
18// activate selected theme
19let theme = 'os';
20const localStorageTheme = localStorage.getItem('theme');
21if (localStorageTheme) {
22 theme = localStorageTheme;
23}
24setTheme(theme);
25// add handler to theme selection element
26const selectTheme = document.getElementById('theme-select');
27if (selectTheme) {
28 selectTheme.addEventListener ('change', function () {
29 localStorage.setItem('theme', selectTheme.value);
30 setTheme(selectTheme.value);
31 });
32 if (theme == 'light') {
33 selectTheme.selectedIndex = 2;
34 } else if (theme == 'dark') {
35 selectTheme.selectedIndex = 1;
36 }
37}