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)
}}
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
  <span class="footer-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>
  {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
    |<a href="javascript:void(0)" onclick="switchTheme('browser')">
      browser
    </a>
  {% endif %}
  theme
{% endif %}
</p>
{% if THEME_COLOR_ENABLE_USER_OVERRIDE %}
  <script>
    {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
      {% if THEME_COLOR|default("light") == "dark" %}
        const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark), (prefers-color-scheme: no-preference)');
      {% else %}
        const darkSchemeWatch = window.matchMedia('(prefers-color-scheme: dark)');
      {% endif %}
    {% endif %}

    function detectThemeAndSwitchStyle() {
      let theme = localStorage.getItem('themeOverride');
      if (theme !== 'light' && theme !== 'dark') {
        {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
          theme = darkSchemeWatch.matches ? 'dark' : 'light';
        {% else %}
          theme = '{{ THEME_COLOR|default("light") }}';
        {% endif %}
      }

      // Find the pygments CSS files (there are two, one for each theme) and
      // change them both to the theme specified by the user.
      const pygmentsTheme = theme === 'light'
        ? '{{ PYGMENTS_STYLE|default('github') }}'
        : '{{ PYGMENTS_STYLE_DARK or PYGMENTS_STYLE or 'monokai' }}';
      Array.from(document.head.getElementsByTagName('link')).forEach(linkEl => {
        if (linkEl.href.match(/\/theme\/pygments\/.*\.min\.css/)) {
          linkEl.href = `/theme/pygments/${pygmentsTheme}.min.css`;
        }
      });

      const htmlElement = document.getElementsByTagName('html')[0];
      if (theme === 'dark') {
        htmlElement.classList.add('dark-theme');
        htmlElement.classList.remove('light-theme');
      } else {
        htmlElement.classList.add('light-theme');
        htmlElement.classList.remove('dark-theme');
      }
    }

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

    detectThemeAndSwitchStyle();
    {% if THEME_COLOR_AUTO_DETECT_BROWSER_PREFERENCE %}
      darkSchemeWatch.addListener(detectThemeAndSwitchStyle);
    {% endif %}
  </script>
{% endif %}