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; }