Removed light/dark modes, introduced list of themes

src/digimarks/static/css/digimarks.css

@@ -3,28 +3,34 @@
  */
 
 :root {
+    /* Default is nebula-light */
     --background-color: #fff;
     --text-color: #121416d8;
     --link-color: #543fd7;
 
     --highlight-color: #fb8c00;
     --border-color: #d5d9d9;
+    --border-width: 1px;
+    --border-radius: 8px;
     --shadow-color: rgba(213, 217, 217, .5);
-    --global-theme-toggle-content: '🌞';
+    --global-theme-toggle-content: ' 🌞';
 }
 
-html[data-theme='light'] {
+html[data-theme='nebula-light'] {
     --background-color: #fff;
     --text-color: #121416d8;
     --link-color: #543fd7;
 
     --highlight-color: #fb8c00;
     --border-color: #d5d9d9;
-    --shadow-color: rgba(213, 217, 217, .5);
+    --border-width: 1px;
-    --global-theme-toggle-content: '🌞';
+    --border-radius: 8px;
+    /*--shadow-color: rgba(213, 217, 217, .5);*/
+    --shadow-color: rgba(4, 0, 0, 1);
+    --global-theme-toggle-content: ' 🌞';
 }
 
-html[data-theme='dark'] {
+html[data-theme='nebula-dark'] {
     --background-color: #29292c;
     --text-color: #F7F8F8;
     --link-color: #ffe7a3;
@@ -32,8 +38,36 @@ html[data-theme='dark'] {
     /*--highlight-color: #fb8c00;*/
     --highlight-color: #e03131;
     --border-color: #333;
+    --border-width: 1px;
+    --border-radius: 8px;
     --shadow-color: rgba(3, 3, 3, .5);
-    --global-theme-toggle-content: '🌝';
+    --global-theme-toggle-content: ' 🌝';
+}
+
+html[data-theme='bbs'] {
+    --background-color: #FFF;
+    --text-color: #000;
+    --link-color: #543fd7;
+
+    --highlight-color: #e03131;
+    --border-color: #333;
+    --border-width: 2px;
+    --border-radius: 0;
+    --global-theme-toggle-content: ' 🖥️';
+}
+
+html[data-theme='silo'] {
+    /*--background-color: #003eaa;*/
+    --background-color: #1d212c;
+    --text-color: #FFF;
+    --link-color: #FF9800;
+
+    /*--highlight-color: #fb8c00;*/
+    --highlight-color: #23B0FF;
+    --border-color: #23B0FF;
+    --border-width: 2px;
+    --border-radius: 0;
+    --global-theme-toggle-content: ' ⌨️';
 }
 
 body {
@@ -41,7 +75,7 @@ body {
     color: var(--text-color);
 }
 
-[date-theme='dark'] header {
+[date-theme='nebula-dark'] header {
     background-color: var(--background-color);
 }
 
@@ -88,28 +122,18 @@ button:focus {
 }
 
 .card {
-    border-radius: 8px;
+    border-radius: var(--border-radius);
-    border-width: 1px;
+    border: var(--border-width) solid var(--border-color);
-    border-style: solid;
-    /*box-shadow: var(--shadow-color) 0 2px 5px 0;*/
     /*margin: 1em;*/
     padding: 1em;
 }
 
-[date-theme='light'] .card {
+[date-theme='nebula-light'] .card,
-    /*border: 1px solid var(--border-color);*/
+[data-theme='nebula-dark'] .card {
-    border-color: var(--border-color);
     box-shadow: var(--shadow-color) 0 2px 5px 0;
 }
 
-[data-theme='dark'] .card {
+.card .meta {
-    /*border: 1px solid var(--border-color);*/
-    /*border-color: hsl(0, 100%, 50%);*/
-    border-color: var(--border-color);
-    box-shadow: var(--shadow-color) 0 2px 5px 0;
-}
-
-[data-theme='dark'] .card .meta {
     filter: brightness(80%);
     color: var(--text-color);
 }

src/digimarks/static/js/digimarks.js

@@ -9,9 +9,9 @@ document.addEventListener('alpine:init', () => {
         bookmarks: [],
         tags: [],
 
-        lightdarkmode: Alpine.$persist('light').as('lightdarkmode'),
+        /* nebula (dropshadows), bbs (monospace, right lines), silo (like bbs but dark) ?? */
-        /* cloudy (dropshadows), bbs (monospace, right lines), ?? */
+        themes: ['nebula-light', 'nebula-dark', 'bbs', 'silo'],
-        theme: Alpine.$persist('cloudy').as('theme'),
+        theme: Alpine.$persist('nebula-light').as('theme'),
 
         show_bookmarks: Alpine.$persist(true).as('show_bookmarks'),
         show_bookmarks_list: Alpine.$persist(true).as('show_bookmarks_list'),
@@ -32,7 +32,7 @@ document.addEventListener('alpine:init', () => {
 
         async init() {
             /** Initialise the application after loading */
-            document.documentElement.setAttribute('data-theme', this.lightdarkmode);
+            document.documentElement.setAttribute('data-theme', this.theme);
             // document.getElementById('theme-link').setAttribute('href', 'digui-theme-' + this.theme + '.css');
             /* await this.getBookmarks(); */
             setInterval(() => {
@@ -41,19 +41,21 @@ document.addEventListener('alpine:init', () => {
             }, 1000);
         },
 
-        async toggleDarkmode() {
+        async loopToNextTheme() {
-            if (this.lightdarkmode === 'dark') {
-                this.lightdarkmode = 'light';
-            } else {
-                this.lightdarkmode = 'dark';
-            }
-            console.log('set date-theme to ' + this.lightdarkmode);
-            document.documentElement.setAttribute('data-theme', this.lightdarkmode);
-        },
-        async toggleTheme() {
             /* TBD: loop through themes */
+            let currentThemeIndex = this.themes.indexOf(this.theme);
+            console.log('currentThemeIndex', currentThemeIndex);
+            if (currentThemeIndex + 1 >= this.themes.length) {
+                currentThemeIndex = 0
+            } else {
+                currentThemeIndex++;
+            }
+            console.log('currentThemeIndex', currentThemeIndex);
+            this.theme = this.themes[currentThemeIndex];
+            console.log('switching to ' + this.theme)
+            document.documentElement.setAttribute('data-theme', this.theme);
             /* Optionally, change the theme CSS file too */
-            document.getElementById('theme-link').setAttribute('href', 'digui-theme-' + this.theme + '.css');
+            // document.getElementById('theme-link').setAttribute('href', 'digui-theme-' + this.theme + '.css');
         },
 
 

src/digimarks/templates/user_index.html

@@ -19,10 +19,7 @@
                         <button x-data>add bookmark</button>
                     </li>
                     <li>
-                        <button @click="$store.digimarks.toggleDarkmode()" class="theme-toggle">mode</button>
+                        <button @click="$store.digimarks.loopToNextTheme()" class="theme-toggle">theme</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>