1  // set dark theme depending on OS settings
 2  function 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
19  let theme = 'os';
20  const localStorageTheme = localStorage.getItem('theme');
21  if (localStorageTheme) {
22      theme = localStorageTheme;
23  }
24  setTheme(theme);
25  // add handler to theme selection element
26  const selectTheme = document.getElementById('theme-select');
27  if (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  }