lerko/nib-v1
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): add tinycard theme

Browse Source 
- New [data-theme="tinycard"] token block with purple accent palette
- Theme toggle cycles dark → paper → tinycard
- Load Inter font for tinycard sans stack
This commit is contained in:
Tyler Koenig
2026-05-16 19:00:25 -04:00
parent 1f2daf4d0e
commit 35fe97a166
3 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/app.js
+7 -3
View File
@@ -1590,16 +1590,20 @@
// ========== Theme ========== // ========== Theme ==========
const THEMES = ['dark', 'paper', 'tinycard'];
const THEME_ICONS = { dark: '◑', paper: '◐', tinycard: '◈' };
const themeToggle = $('#theme-toggle'); const themeToggle = $('#theme-toggle');
let nibTheme = localStorage.getItem('nib:theme') || 'dark'; let nibTheme = localStorage.getItem('nib:theme') || 'dark';
if (!THEMES.includes(nibTheme)) nibTheme = 'dark';
document.documentElement.setAttribute('data-theme', nibTheme); document.documentElement.setAttribute('data-theme', nibTheme);
themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑'; themeToggle.textContent = THEME_ICONS[nibTheme];
themeToggle.addEventListener('click', () => { themeToggle.addEventListener('click', () => {
nibTheme = nibTheme === 'dark' ? 'paper' : 'dark'; nibTheme = THEMES[(THEMES.indexOf(nibTheme) + 1) % THEMES.length];
document.documentElement.setAttribute('data-theme', nibTheme); document.documentElement.setAttribute('data-theme', nibTheme);
localStorage.setItem('nib:theme', nibTheme); localStorage.setItem('nib:theme', nibTheme);
themeToggle.textContent = nibTheme === 'paper' ? '◐' : '◑'; themeToggle.textContent = THEME_ICONS[nibTheme];
}); });
// ========== Init ========== // ========== Init ==========
web/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<title>nib</title> <title>nib</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style.css">
</head> </head>
<body> <body>
web/style.css
+24
View File
@@ -50,6 +50,30 @@
--lineage: #5830a0; --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 ──────────────────────────────────────────── */ /* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; } html, body { height: 100%; overflow: hidden; }