diff --git a/src/digimarks/static/css/digimarks.css b/src/digimarks/static/css/digimarks.css index 7d05a9d..c55ed4c 100644 --- a/src/digimarks/static/css/digimarks.css +++ b/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); - --global-theme-toggle-content: '🌞'; + --border-width: 1px; + --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-width: 1px; - border-style: solid; - /*box-shadow: var(--shadow-color) 0 2px 5px 0;*/ + border-radius: var(--border-radius); + border: var(--border-width) solid var(--border-color); /*margin: 1em;*/ padding: 1em; } -[date-theme='light'] .card { - /*border: 1px solid var(--border-color);*/ - border-color: var(--border-color); +[date-theme='nebula-light'] .card, +[data-theme='nebula-dark'] .card { 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 { +.card .meta { filter: brightness(80%); color: var(--text-color); } diff --git a/src/digimarks/static/js/digimarks.js b/src/digimarks/static/js/digimarks.js index 064dc2c..57f09b5 100644 --- a/src/digimarks/static/js/digimarks.js +++ b/src/digimarks/static/js/digimarks.js @@ -9,9 +9,9 @@ document.addEventListener('alpine:init', () => { bookmarks: [], tags: [], - lightdarkmode: Alpine.$persist('light').as('lightdarkmode'), - /* cloudy (dropshadows), bbs (monospace, right lines), ?? */ - theme: Alpine.$persist('cloudy').as('theme'), + /* nebula (dropshadows), bbs (monospace, right lines), silo (like bbs but dark) ?? */ + themes: ['nebula-light', 'nebula-dark', 'bbs', 'silo'], + 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() { - 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() { + async loopToNextTheme() { /* 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'); }, diff --git a/src/digimarks/templates/user_index.html b/src/digimarks/templates/user_index.html index ee8e831..86d6528 100644 --- a/src/digimarks/templates/user_index.html +++ b/src/digimarks/templates/user_index.html @@ -19,10 +19,7 @@