From d9e8ca76fe82603302947f4e47177508a99d722d Mon Sep 17 00:00:00 2001
From: Michiel Scholten <michiel@diginaut.net>
Date: Thu, 8 May 2025 19:13:17 +0200
Subject: [PATCH] Initial theme toggler

---
 src/digimarks/static/css/digimarks.css  | 25 +++++++++++++++++++++++++
 src/digimarks/static/js/digimarks.js    | 15 +++++++++++++--
 src/digimarks/templates/user_index.html |  5 ++++-
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/digimarks/static/css/digimarks.css b/src/digimarks/static/css/digimarks.css
index 8267190..47e8c6a 100644
--- a/src/digimarks/static/css/digimarks.css
+++ b/src/digimarks/static/css/digimarks.css
@@ -2,6 +2,31 @@
  * digimarks styling
  */
 
+html[data-theme='light'] {
+    --background-color: #fff;
+    --text-color: #121416d8;
+    --link-color: #543fd7;
+}
+
+html[data-theme='dark'] {
+    --background-color: #212a2e;
+    --text-color: #F7F8F8;
+    --link-color: #828fff;
+}
+
+body {
+    background: var(--background-color);
+    color: var(--text-color);
+}
+
+a {
+    color: var(--link-color);
+}
+
+a:hover {
+    text-decoration: underline;
+    filter: brightness(80%);
+}
 
 /* Active element, e.g. a button */
 .active {
diff --git a/src/digimarks/static/js/digimarks.js b/src/digimarks/static/js/digimarks.js
index 6ac72c7..522bc23 100644
--- a/src/digimarks/static/js/digimarks.js
+++ b/src/digimarks/static/js/digimarks.js
@@ -9,6 +9,8 @@ document.addEventListener('alpine:init', () => {
         bookmarks: [],
         tags: [],
 
+        theme: Alpine.$persist('light').as('theme'),
+
         show_bookmarks: Alpine.$persist(true).as('show_bookmarks'),
         show_bookmarks_list: Alpine.$persist(true).as('show_bookmarks_list'),
         show_bookmarks_cards: Alpine.$persist(false).as('show_bookmarks_cards'),
@@ -39,6 +41,16 @@ document.addEventListener('alpine:init', () => {
             }, 1000);
         },
 
+        async toggleTheme() {
+            /* TBD: loop through themes instead of dark/light modes */
+            if (this.theme === 'dark') {
+                this.theme = 'light';
+            } else {
+                this.theme = 'dark';
+            }
+            document.documentElement.setAttribute('data-theme', this.theme);
+        },
+
         async loadCache() {
             if (this.userKey in this.cache) {
                 console.log('Loading bookmarks from cache for user "' + this.userKey + '"');
@@ -75,8 +87,7 @@ document.addEventListener('alpine:init', () => {
             this.cache[this.userKey]['bookmarks'] = result;
 
             let tags_response = await fetch('/api/v1/' + this.userKey + '/tags/');
-            let tags_result = await tags_response.json();
-            this.cache[this.userKey]['tags'] = tags_result;
+            this.cache[this.userKey]['tags'] = await tags_response.json();
 
             this.loading = false;
         },
diff --git a/src/digimarks/templates/user_index.html b/src/digimarks/templates/user_index.html
index 1431d9c..d4d986d 100644
--- a/src/digimarks/templates/user_index.html
+++ b/src/digimarks/templates/user_index.html
@@ -18,6 +18,9 @@
                     <li>
                         <button x-data>add bookmark</button>
                     </li>
+                    <li>
+                        <button @click="$store.digimarks.toggleTheme()">theme</button>
+                    </li>
                     <li><input x-model="$store.digimarks.search" placeholder="Search..."></li>
                     <li x-show="$store.digimarks.loading">&orarr;</li>
                 </ul>
@@ -56,7 +59,7 @@
                     <template x-for="bookmark in $store.digimarks.filteredBookmarks" :key="bookmark.id">
                         <div class="card">
                             <div x-show="bookmark.starred">*</div>
-{#                            <img x-show="bookmark.favicon" x-bind:src="'/static/favicons/' + bookmark.favicon">#}
+                            {#                            <img x-show="bookmark.favicon" x-bind:src="'/static/favicons/' + bookmark.favicon">#}
                             <a x-text="bookmark.title" x-bind:href="bookmark.url" target="_blank"></a>
                         </div>
                     </template>