From e2f68d9ccfefe0b43efc2e28b2a659f02fe5e5c0 Mon Sep 17 00:00:00 2001
From: Sam Storment <sjstorment22@gmail.com>
Date: Sun, 2 Jun 2024 21:02:52 -0500
Subject: [PATCH] Add a theme select to the header that lets users toggle their
 theme independent of their OS theme

---
 code/libraries/array/cpp/resources/libcpp.so  | Bin 0 -> 16040 bytes
 .../resources/static/search/serp.scss         |  56 +++++++++--------
 .../resources/static/search/theme.js          |  57 ++++++++++++++++++
 .../templates/search/parts/search-header.hdb  |  11 ++++
 4 files changed, 99 insertions(+), 25 deletions(-)
 create mode 100755 code/libraries/array/cpp/resources/libcpp.so
 create mode 100644 code/services-application/search-service/resources/static/search/theme.js

diff --git a/code/libraries/array/cpp/resources/libcpp.so b/code/libraries/array/cpp/resources/libcpp.so
new file mode 100755
index 0000000000000000000000000000000000000000..9d6d9616786258903a462cbf295a9cdf0150d75c
GIT binary patch
literal 16040
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

literal 0
HcmV?d00001

diff --git a/code/services-application/search-service/resources/static/search/serp.scss b/code/services-application/search-service/resources/static/search/serp.scss
index b2ca3a19..fe5f231c 100644
--- a/code/services-application/search-service/resources/static/search/serp.scss
+++ b/code/services-application/search-service/resources/static/search/serp.scss
@@ -1,4 +1,6 @@
 :root {
+  color-scheme: light;
+
   --clr-bg-page: hsl(60, 42%, 95%); // $nicotine-light
 
   --clr-bg-ui: hsl(0, 0%, 100%);
@@ -26,40 +28,39 @@
   --font-family-heading: serif; // $heading-fonts
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --clr-bg-page: hsl(0, 0%, 6%);
+ 
+:root[data-theme='dark'] {
 
-    --clr-bg-ui: hsl(0, 0%, 18%);
-    --clr-text-ui: #ddd;
+  color-scheme: dark;
 
-    --clr-bg-theme: hsl(0, 0%, 2%);
-    --clr-text-theme: var(--clr-text-ui);
+  --clr-bg-page: hsl(0, 0%, 6%);
 
-    --clr-bg-highlight: hsl(0, 0%, 11%);
-    --clr-text-highlight: #fff;
+  --clr-bg-ui: hsl(0, 0%, 18%);
+  --clr-text-ui: #ddd;
 
-    --clr-bg-accent: hsl(200, 32%, 28%);
-    --clr-border-accent: hsl(200, 8%, 12%);
+  --clr-bg-theme: hsl(0, 0%, 2%);
+  --clr-text-theme: var(--clr-text-ui);
 
-    --clr-border: hsl(0, 0%, 30%);
+  --clr-bg-highlight: hsl(0, 0%, 11%);
+  --clr-text-highlight: #fff;
 
-    --clr-shadow: #000;
+  --clr-bg-accent: hsl(200, 32%, 28%);
+  --clr-border-accent: hsl(200, 8%, 12%);
 
-    --clr-link: #8a8aff;
-    --clr-link-visited: #ffadff;
-    --clr-heading-link-visited: var(--clr-link-visited);
-  }
+  --clr-border: hsl(0, 0%, 30%);
+
+  --clr-shadow: #000;
+
+  --clr-link: #8a8aff;
+  --clr-link-visited: #ffadff;
+  --clr-heading-link-visited: var(--clr-link-visited);
 }
 
+
 * {
   box-sizing: border-box;
 }
 
-html {
-  color-scheme: light dark;
-}
-
 a {
   color: var(--clr-link);
 }
@@ -199,6 +200,8 @@ header {
   color: var(--clr-text-ui);
   box-shadow: 0 0 0.5ch var(--clr-shadow);
   margin-bottom: 1ch;
+  display: flex;
+  align-items: center;
 
   nav {
     a {
@@ -228,6 +231,11 @@ header {
   }
 }
 
+#theme {
+  margin-left: auto;
+  margin-right: .5ch;
+}
+
 #complaint {
   @extend .dialog;
   max-width: 60ch;
@@ -333,10 +341,8 @@ section.cards {
       line-height: 1.6;
     }
 
-    @media (prefers-color-scheme: dark) {
-      & {
-        border: 1px solid var(--clr-border);
-      }
+    [data-theme='dark'] & {
+      border: 1px solid var(--clr-border);
     }
   }
 }
diff --git a/code/services-application/search-service/resources/static/search/theme.js b/code/services-application/search-service/resources/static/search/theme.js
new file mode 100644
index 00000000..73fdcd26
--- /dev/null
+++ b/code/services-application/search-service/resources/static/search/theme.js
@@ -0,0 +1,57 @@
+function getTheme() {
+    const theme = window.localStorage.getItem('theme');
+
+    // if a valid theme is set in localStorage, return it
+    if (theme === 'dark' || theme === 'light') {
+        return { value: theme, system: false };
+    }
+
+    // if matchMedia is supported and OS theme is dark
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return { value: 'dark', system: true };
+    }
+
+    return { value: 'light', system: true };
+}
+
+function setTheme(value) {
+    if (value === 'dark' || value === 'light') {
+        window.localStorage.setItem('theme', value);
+    } else {
+        window.localStorage.removeItem('theme');
+    }
+
+    const theme = getTheme();
+
+    document.documentElement.setAttribute('data-theme', theme.value);
+}
+
+function initializeTheme() {
+    const themeSelect = document.getElementById('theme-select');
+
+    const theme = getTheme();
+
+    document.documentElement.setAttribute('data-theme', theme.value);
+
+    // system is selected by default in the themeSwitcher so ignore it here
+    if (!theme.system) {
+        themeSelect.value = theme.value;
+    }
+
+    themeSelect.addEventListener('change', e => {
+        setTheme(e.target.value);
+    });
+    
+    const mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+    // if someone changes their theme at the OS level we need to update 
+    // their theme immediately if they're using their OS theme
+    mql.addEventListener('change', e => {    
+        if (themeSelect.value !== 'system') return;
+        
+        if (e.matches) setTheme('dark');
+        else setTheme('light');
+    });
+}
+
+initializeTheme();
\ No newline at end of file
diff --git a/code/services-application/search-service/resources/templates/search/parts/search-header.hdb b/code/services-application/search-service/resources/templates/search/parts/search-header.hdb
index c9ad0dab..805ea8a9 100644
--- a/code/services-application/search-service/resources/templates/search/parts/search-header.hdb
+++ b/code/services-application/search-service/resources/templates/search/parts/search-header.hdb
@@ -7,4 +7,15 @@
         <a href="https://memex.marginalia.nu/projects/edge/supporting.gmi">Donate</a>
         <a class="extra" href="https://search.marginalia.nu/explore/random">Random</a>
     </nav>
+    <div id="theme">
+        <label for="theme-select" class="screenreader-only">Color Theme</label>
+        <select id="theme-select">
+            <option value="system" selected>System</option>
+            <option value="light">Light</option>
+            <option value="dark">Dark</option>
+        </select>
+    </div>
 </header>
+
+<!-- load this ASAP to avoid color theme flicker -->
+<script src="/theme.js"></script>
\ No newline at end of file