From 17a861d2d3aa6ab35986dc28aac78d9f3ef4fe99 Mon Sep 17 00:00:00 2001
From: Kirill <opoxmeloid@yandex.ru>
Date: Mon, 25 Nov 2024 19:25:31 +0200
Subject: [PATCH] feat: added theme switcher with match-system option

---
 frontend/html/layout.html              | 11 +---
 frontend/html/misc/theme_switcher.html | 90 ++++++++++++++++++++++++++
 frontend/static/js/App.js              | 35 ++--------
 3 files changed, 97 insertions(+), 39 deletions(-)
 create mode 100644 frontend/html/misc/theme_switcher.html

diff --git a/frontend/html/layout.html b/frontend/html/layout.html
index 53f49fc89..b40695d04 100644
--- a/frontend/html/layout.html
+++ b/frontend/html/layout.html
@@ -9,12 +9,6 @@
     {% block meta %}
         {% include "common/meta.html" %}
     {% endblock %}
-    <script>
-        const theme = localStorage.getItem('theme');
-        if (theme !== null) {
-            document.documentElement.setAttribute('theme', theme);
-        }
-    </script>
 
     {% block feeds %}
     <link rel="alternate" type="application/rss+xml"
@@ -62,10 +56,7 @@
             CC BY-SA
         </div>
         <div class="footer-right">
-            <label class="theme-switcher" for="checkbox">
-                <input type="checkbox" id="checkbox" />
-                <span class="slider round"></span>
-            </label>
+            {% include "misc/theme_switcher.html" %}
 
             {% if me %}
                 <form method="POST" action="{% url "logout" %}">
diff --git a/frontend/html/misc/theme_switcher.html b/frontend/html/misc/theme_switcher.html
new file mode 100644
index 000000000..32c9e7da5
--- /dev/null
+++ b/frontend/html/misc/theme_switcher.html
@@ -0,0 +1,90 @@
+<starlight-theme-select>
+  <label style='width: 6.25em'>
+    <span class="sr-only">Выберите тему</span>
+    <select value="auto" width="6.25em">
+      <option value="dark">Темная тема</option>
+      <option value="light">Светлая тема</option>
+      <option value="auto">Системная тема</option>
+    </select>
+  </label>
+</starlight-theme-select>
+
+
+<script>
+  const storageKey = 'theme';
+
+  const parseTheme = (theme) =>
+    theme === 'auto' || theme === 'dark' || theme === 'light' ? theme : 'auto';
+
+  const loadTheme = () =>
+    parseTheme(typeof localStorage !== 'undefined' && localStorage.getItem(storageKey));
+
+  function storeTheme(theme) {
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(storageKey, theme === 'light' || theme === 'dark' ? theme : '');
+    }
+  }
+
+  const getPreferredColorScheme = () =>
+    matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+
+  matchMedia(`(prefers-color-scheme: light)`).addEventListener('change', () => {
+    if (loadTheme() === 'auto') onThemeChange('auto');
+  });
+
+  class StarlightThemeProvider {
+    storedTheme = loadTheme();
+
+    constructor() {
+      const theme = this.storedTheme ||
+        (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+      document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
+    }
+
+    updatePickers(theme = this.storedTheme || 'auto') {
+      document.querySelectorAll('starlight-theme-select').forEach((picker) => {
+        console.log('picker', picker);
+        const select = picker.querySelector('select');
+        if (select) select.value = theme;
+
+        /** @type {HTMLTemplateElement | null} */
+        const tmpl = document.querySelector(`#theme-icons`);
+        const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
+        if (newIcon) {
+          const oldIcon = picker.querySelector('starlight-theme-select i.label-icon');
+          if (oldIcon) {
+            oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
+          }
+        }
+      });
+    }
+  }
+
+
+  class StarlightThemeSelect extends HTMLElement {
+    themeProvider = new StarlightThemeProvider();
+
+    constructor() {
+      super();
+      this.onThemeChange(loadTheme());
+      this.querySelector('select')?.addEventListener('change', (e) => {
+        if (e.currentTarget instanceof HTMLSelectElement) {
+          this.onThemeChange(parseTheme(e.currentTarget.value));
+        }
+      });
+
+      this.themeProvider.updatePickers(loadTheme());
+
+      matchMedia(`(prefers-color-scheme: light)`).addEventListener('change', () => {
+        if (loadTheme() === 'auto') this.onThemeChange('auto');
+      });
+    }
+
+    onThemeChange(theme) {
+      this.themeProvider.updatePickers(theme);
+      document.documentElement.setAttribute("theme", theme === 'auto' ? getPreferredColorScheme() : theme);
+      storeTheme(theme);
+    }
+  }
+  customElements.define('starlight-theme-select', StarlightThemeSelect);
+</script>
\ No newline at end of file
diff --git a/frontend/static/js/App.js b/frontend/static/js/App.js
index aca9589be..5b2533a6f 100644
--- a/frontend/static/js/App.js
+++ b/frontend/static/js/App.js
@@ -7,7 +7,7 @@ import {
     createFileInput,
     createMarkdownEditor,
     handleFormSubmissionShortcuts,
-    imageUploadOptions
+    imageUploadOptions,
 } from "./common/markdown-editor";
 import { getCollapsedCommentThreadsSet } from "./common/comments";
 
@@ -38,40 +38,17 @@ const App = {
     initializeEmojiForPoorPeople() {
         const isApple = /iPad|iPhone|iPod|OS X/.test(navigator.userAgent) && !window.MSStream;
         if (!isApple) {
-            document.body = twemoji.parse(
-                document.body,
-                { base: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/" }
-            );
+            document.body = twemoji.parse(document.body, {
+                base: "https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/",
+            });
         }
     },
     initializeThemeSwitcher() {
-        const themeSwitch = document.querySelector('.theme-switcher input[type="checkbox"]');
         const mediaQueryList = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
 
-        themeSwitch.addEventListener(
-            "change",
-            function (e) {
-                let theme = "light";
-                if (e.target.checked) {
-                    theme = "dark";
-                }
-                document.documentElement.setAttribute("theme", theme);
-                localStorage.setItem("theme", theme);
-            },
-            false
-        );
-
-        const theme = localStorage.getItem("theme");
-        themeSwitch.checked = theme ? theme === "dark" : mediaQueryList.matches;
-
         const setFaviconHref = (e) => {
             const svgFavicon = document.querySelector('link[type="image/svg+xml"]');
             const isDark = e.matches;
-
-            if (!theme) {
-                themeSwitch.checked = isDark;
-            }
-
             svgFavicon.href = isDark ? "/static/images/favicon/favicon-dark.svg" : "/static/images/favicon/favicon.svg";
         };
 
@@ -91,7 +68,7 @@ const App = {
 
         const fullMarkdownEditors = [...document.querySelectorAll(".markdown-editor-full")].reduce(
             (editors, element) => {
-                const fileInputEl = createFileInput({ allowedTypes: imageUploadOptions.allowedTypes })
+                const fileInputEl = createFileInput({ allowedTypes: imageUploadOptions.allowedTypes });
                 const editor = createMarkdownEditor(element, {
                     autosave: {
                         enabled: false,
@@ -145,7 +122,7 @@ const App = {
                         {
                             name: "upload-file",
                             action: () => {
-                                fileInputEl.click()
+                                fileInputEl.click();
                             },
                             className: "fa fa-paperclip",
                             text: "Upload image",