flex/templates/partial/flex.html

<p>{{ _('Built with %(pelican_url)s using %(flex_url)s theme',
  pelican_url='<a href="http://getpelican.com" target="_blank">Pelican</a>',
  flex_url='<a href="http://bit.ly/flex-pelican" target="_blank">Flex</a>'|safe) }}
  <span class="theme-separator">|</span>
  Switch to the
  <a href="javascript:void(0)" onclick="switchTheme('dark')">
    dark
  </a>|<a href="javascript:void(0)" onclick="switchTheme('light')">
    light
  </a>|<a href="javascript:void(0)" onclick="switchTheme('browser')">
    browser
  </a>
  theme
</p>
<script>
  const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');

  function detectThemeAndSwitchStyle() {
    let theme = localStorage.getItem('themeOverride') || 'browser';
    if (theme === 'browser') {
      theme = darkSchemeWatch.matches ? 'dark' : 'light';
    }
    console.log(`Switching theme to ${theme}.`)

    // Find the pygments CSS file and change it to the theme specified in the
    // config.
    const pygmentsTheme = theme === 'light'
      ? '{{ PYGMENTS_STYLE }}'
      : '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE }}'
    Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => {
      if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) {
        linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`;
      }
    });

    if (theme === 'dark') {
      document.body.classList.add('dark-theme');
      document.body.classList.remove('light-theme');
    } else {
      document.body.classList.add('light-theme');
      document.body.classList.remove('dark-theme');
    }
  }

  function switchTheme(themeOverride) {
    localStorage.setItem('themeOverride', themeOverride);
    detectThemeAndSwitchStyle();
  }

  detectThemeAndSwitchStyle();
  darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
</script>