From 35fe97a1661f60f2b7a149de30fabeae485f158c Mon Sep 17 00:00:00 2001 From: Tyler Koenig Date: Sat, 16 May 2026 19:00:25 -0400 Subject: [PATCH] feat(ui): add tinycard theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - New [data-theme="tinycard"] token block with purple accent palette - Theme toggle cycles dark → paper → tinycard - Load Inter font for tinycard sans stack --- web/app.js | 10 +++++++--- web/index.html | 2 +- web/style.css | 24 ++++++++++++++++++++++++ 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/web/app.js b/web/app.js index a20149c..9df72c1 100644 --- a/web/app.js +++ b/web/app.js @@ -1590,16 +1590,20 @@ // ========== Theme ========== + const THEMES = ['dark', 'paper', 'tinycard']; + const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈' }; + const themeToggle = $('#theme-toggle'); let nibTheme = localStorage.getItem('nib:theme') || 'dark'; + if (!THEMES.includes(nibTheme)) nibTheme = 'dark'; document.documentElement.setAttribute('data-theme', nibTheme); - themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑'; + themeToggle.textContent = THEME_ICONS[nibTheme]; themeToggle.addEventListener('click', () => { - nibTheme = nibTheme === 'dark' ? 'paper' : 'dark'; + nibTheme = THEMES[(THEMES.indexOf(nibTheme) + 1) % THEMES.length]; document.documentElement.setAttribute('data-theme', nibTheme); localStorage.setItem('nib:theme', nibTheme); - themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑'; + themeToggle.textContent = THEME_ICONS[nibTheme]; }); // ========== Init ========== diff --git a/web/index.html b/web/index.html index 42aed17..2c29c7b 100644 --- a/web/index.html +++ b/web/index.html @@ -6,7 +6,7 @@ nib - + diff --git a/web/style.css b/web/style.css index 43cf33d..d5f9966 100644 --- a/web/style.css +++ b/web/style.css @@ -50,6 +50,30 @@ --lineage: #5830a0; } +[data-theme="tinycard"] { + color-scheme: dark; + --bg: #0f1117; + --surf: #161922; + --raised: #1e2130; + --border: #2a2e3d; + --soft: #222639; + --text: #e1e4ed; + --muted: #8b90a0; + --dim: #555a6a; + --accent: #ad8ee6; + --a-bg: rgba(173,142,230,.09); + --a-str: rgba(173,142,230,.22); + --todo: #fbbf24; + --note: #22d3ee; + --event: #22d3ee; + --remind: #e8845a; + --ok: #4ade80; + --danger: #ef4444; + --lineage: #a78bfa; + --sans: 'Inter', system-ui, sans-serif; + --mono: 'JetBrains Mono', ui-monospace, monospace; +} + /* ── RESET ──────────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; }