Theming trials

src/digimarks/static/css/digimarks.css

@@ -2,16 +2,38 @@
  * digimarks styling
  */
 
+:root {
+    --background-color: #fff;
+    --text-color: #121416d8;
+    --link-color: #543fd7;
+
+    --highlight-color: #fb8c00;
+    --border-color: #d5d9d9;
+    --shadow-color: rgba(213, 217, 217, .5);
+    --global-theme-toggle-content: '🌞';
+}
+
 html[data-theme='light'] {
     --background-color: #fff;
     --text-color: #121416d8;
     --link-color: #543fd7;
+
+    --highlight-color: #fb8c00;
+    --border-color: #d5d9d9;
+    --shadow-color: rgba(213, 217, 217, .5);
+    --global-theme-toggle-content: '🌞';
 }
 
 html[data-theme='dark'] {
-    --background-color: #212a2e;
+    --background-color: #29292c;
     --text-color: #F7F8F8;
-    --link-color: #828fff;
+    --link-color: #ffe7a3;
+
+    /*--highlight-color: #fb8c00;*/
+    --highlight-color: #e03131;
+    --border-color: #333;
+    --shadow-color: rgba(3, 3, 3, .5);
+    --global-theme-toggle-content: '🌝';
 }
 
 body {
@@ -19,6 +41,18 @@ body {
     color: var(--text-color);
 }
 
+[date-theme='dark'] header {
+    background-color: var(--background-color);
+}
+
+h1, h2, h3, h4, h5, h6, p, li {
+    color: var(--text-color);
+}
+
+a, a:hover, a:visited, a:active {
+    text-decoration: none;
+}
+
 a {
     color: var(--link-color);
 }
@@ -30,17 +64,23 @@ a:hover {
 
 /* Active element, e.g. a button */
 .active {
-    background-color: #fb8c00;
+    background-color: var(--highlight-color);
 }
 
 button:hover {
-    background-color: #d57803;
+    /*background-color: #d57803;*/
+    background-color: var(--highlight-color);
+    filter: brightness(80%);
 }
 
 button:focus {
     border-color: #d57803;
 }
 
+.theme-toggle::after {
+    content: var(--global-theme-toggle-content);
+}
+
 .cards {
     grid-column-gap: 1rem;
     grid-row-gap: 1rem;
@@ -48,10 +88,28 @@ button:focus {
 }
 
 .card {
-    background-color: #fff;
-    border: 1px solid #d5d9d9;
     border-radius: 8px;
-    box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
+    border-width: 1px;
+    border-style: solid;
+    /*box-shadow: var(--shadow-color) 0 2px 5px 0;*/
     /*margin: 1em;*/
     padding: 1em;
 }
+
+[date-theme='light'] .card {
+    /*border: 1px solid var(--border-color);*/
+    border-color: var(--border-color);
+    box-shadow: var(--shadow-color) 0 2px 5px 0;
+}
+
+[data-theme='dark'] .card {
+    /*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,7 +9,9 @@ document.addEventListener('alpine:init', () => {
         bookmarks: [],
         tags: [],
 
-        theme: Alpine.$persist('light').as('theme'),
+        lightdarkmode: Alpine.$persist('light').as('lightdarkmode'),
+        /* cloudy (dropshadows), bbs (monospace, right lines), ?? */
+        theme: Alpine.$persist('cloudy').as('theme'),
 
         show_bookmarks: Alpine.$persist(true).as('show_bookmarks'),
         show_bookmarks_list: Alpine.$persist(true).as('show_bookmarks_list'),
@@ -30,10 +32,8 @@ document.addEventListener('alpine:init', () => {
 
         async init() {
             /** Initialise the application after loading */
-            // if (this.userKey in this.cache) {
-            //     console.log('loading bookmarks from cache');
-            //     this.bookmarks = this.cache[this.userKey]['bookmarks'] || [];
-            // }
+            document.documentElement.setAttribute('data-theme', this.lightdarkmode);
+            // document.getElementById('theme-link').setAttribute('href', 'digui-theme-' + this.theme + '.css');
             /* await this.getBookmarks(); */
             setInterval(() => {
                 // Update counter to next game (midnight UTC, fetched from API) every second
@@ -41,15 +41,21 @@ document.addEventListener('alpine:init', () => {
             }, 1000);
         },
 
-        async toggleTheme() {
-            /* TBD: loop through themes instead of dark/light modes */
-            if (this.theme === 'dark') {
-                this.theme = 'light';
+        async toggleDarkmode() {
+            if (this.lightdarkmode === 'dark') {
+                this.lightdarkmode = 'light';
             } else {
-                this.theme = 'dark';
+                this.lightdarkmode = 'dark';
             }
-            document.documentElement.setAttribute('data-theme', this.theme);
+            console.log('set date-theme to ' + this.lightdarkmode);
+            document.documentElement.setAttribute('data-theme', this.lightdarkmode);
         },
+        async toggleTheme() {
+            /* TBD: loop through themes */
+            /* Optionally, change the theme CSS file too */
+            document.getElementById('theme-link').setAttribute('href', 'digui-theme-' + this.theme + '.css');
+        },
+
 
         async loadCache() {
             if (this.userKey in this.cache) {

src/digimarks/templates/user_index.html

@@ -18,6 +18,9 @@
                     <li>
                         <button x-data>add bookmark</button>
                     </li>
+                    <li>
+                        <button @click="$store.digimarks.toggleDarkmode()" class="theme-toggle">mode</button>
+                    </li>
                     <li>
                         <button @click="$store.digimarks.toggleTheme()">theme</button>
                     </li>
@@ -61,6 +64,7 @@
                             <div x-show="bookmark.starred">*</div>
                             {#                            <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 x-text="bookmark.tags" class="meta"></div>
                         </div>
                     </template>
                 </section>