Added system dark theme check

claceio · Feb 1, 2024 · fa7531e · fa7531e
1 parent 0904caf
commit fa7531e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/utils/bookmarks/layout.go.html b/utils/bookmarks/layout.go.html
@@ -7,17 +7,18 @@
       <title>Bookmark Manager</title>
 
       <script>
-            const theme = localStorage.getItem('theme') || 'theme-light';
-            if (theme == 'theme-light') {
-                document.documentElement.setAttribute("data-theme", "lemonade")
-            } else {
+            const theme = localStorage.getItem('theme');
+            const systemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches 
+            if (theme == 'theme-dark' || (theme == null && systemDark)) {
                 document.documentElement.setAttribute("data-theme", "dim")
+            } else {
+                document.documentElement.setAttribute("data-theme", "lemonade")
             }
       </script> 
 
       <link href="{{ static "css/tom-select.css" }}" rel="stylesheet" />
       <script src="{{ static "gen/lib/tom-select.complete.min.js" }}"></script>
-      <script defer src="{{ static "/lib/toggle.js" }}"></script>
+      <script src="{{ static "/lib/toggle.js" }}"></script>
 
       {{ template "clace_gen_import" . }}
     </head>
@@ -37,15 +38,15 @@
          </div>
 
           <div class="col-start-5 justify-self-end pt-2">
-            <label for="theme-toggle" class="swap swap-rotate">
+            <label for="theme-toggle" class="swap swap-rotate" title="Switch between dark and light themes">
               <!-- This input checkbox will be hidden -->
               <input id="theme-toggle" class="hidden" type="checkbox" />
 
-              <svg xmlns="http://www.w3.org/2000/svg" class="theme-light swap-off fill-current w-5 h-5" width="24" height="24" viewBox="0 0 24 24"
+              <svg xmlns="http://www.w3.org/2000/svg" class="theme-dark swap-on fill-current w-5 h-5" width="24" height="24" viewBox="0 0 24 24"
                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" /><path d="M12 5l0 -2" /><path d="M17 7l1.4 -1.4" /><path d="M19 12l2 0" /><path d="M17 17l1.4 1.4" /><path d="M12 19l0 2" /><path d="M7 17l-1.4 1.4" /><path d="M6 12l-2 0" /><path d="M7 7l-1.4 -1.4" /></svg>
 
-              <svg xmlns="http://www.w3.org/2000/svg" class="theme-dark swap-on fill-current w-5 h-5" width="24" height="24" viewBox="0 0 24 24"
+              <svg xmlns="http://www.w3.org/2000/svg" class="theme-light swap-off fill-current w-5 h-5" width="24" height="24" viewBox="0 0 24 24"
                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
             </label>

diff --git a/utils/bookmarks/static/lib/toggle.js b/utils/bookmarks/static/lib/toggle.js
@@ -1,20 +1,24 @@
 // Check for saved theme on page load and update the toggle
 document.addEventListener('DOMContentLoaded', (event) => {
-    const theme = localStorage.getItem('theme') || 'theme-light';
-    if (theme == 'theme-light') {
-        document.querySelector('#theme-toggle').checked = false;
-    } else {
-        document.querySelector('#theme-toggle').checked = true;
-    }
-});
+    const theme = localStorage.getItem('theme');
+    const systemDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-// Update theme switch logic to save preference
-document.getElementById('theme-toggle').addEventListener('change', function(event){
-    if(event.target.checked){
-        document.documentElement.setAttribute("data-theme", "dim")
-        localStorage.setItem('theme', 'theme-dark');
+    toggle = document.getElementById('theme-toggle') 
+    if (theme == 'theme-dark' || (theme == null && systemDark)) {
+        toggle.checked = true;
     } else {
-        document.documentElement.setAttribute("data-theme", "lemonade")
-        localStorage.setItem('theme', 'theme-light');
+        toggle.checked = false;
     }
-});
+
+    // Update theme switch logic to save preference
+    toggle.addEventListener('change', function(event){
+        if(event.target.checked){
+            document.documentElement.setAttribute("data-theme", "dim")
+            localStorage.setItem('theme', 'theme-dark');
+        } else {
+            document.documentElement.setAttribute("data-theme", "lemonade")
+            localStorage.setItem('theme', 'theme-light');
+        }
+    });
+
+});