dynamic favicon theme

static/js/faviconTheme.js

@@ -0,0 +1,28 @@
+// Get the light and dark favicon elements
+lightSchemeIcon = document.querySelector('link#light-favicon');
+darkSchemeIcon = document.querySelector('link#dark-favicon');
+
+// Set the favicon color by adding the appropriate link element
+// to the document head and removing the other
+function updateFaviconColor(dark) {
+    if (!lightSchemeIcon || !darkSchemeIcon) return;
+
+    if (dark) {
+        lightSchemeIcon.remove();
+        document.head.append(darkSchemeIcon);
+    } else {
+        document.head.append(lightSchemeIcon);
+        darkSchemeIcon.remove();
+    }
+}
+
+// Get the current theme at startup, defaulting to light
+const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+
+// Set the favicon color on startup
+updateFaviconColor(currentTheme === 'dark');
+
+// Listen for theme changes and update the favicon color accordingly
+window.addEventListener('themeChanged', (event) => {
+    updateFaviconColor(event.detail.theme === 'dark');
+});

templates/partials/header.html

@@ -14,6 +14,11 @@
     {# Favicon #}
     {% if config.extra.favicon %}
         <link rel="icon" type="image/png" href="{{ get_url(path=config.extra.favicon) }}"/>
+    {% elif config.extra.light_favicon and config.extra.dark_favicon %}
+        {# Favicon theme switcher. If JavaScript is disabled, defaults to the light icon #}
+        <link id="dark-favicon" rel="icon" href="{{ get_url(path=config.extra.dark_favicon) }}">
+        <link id="light-favicon" rel="icon" href="{{ get_url(path=config.extra.light_favicon) }}">
+        <script type="text/javascript" src="{{ get_url(path='js/faviconTheme.js') | safe }}"></script>
     {% endif %}
     {% if config.extra.favicon_emoji %}
         <link rel=icon href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">{{ config.extra.favicon_emoji }}</text></svg>'>