From 74efbe9c1b92a99a82821b67f497767e14a2311c Mon Sep 17 00:00:00 2001 From: Drew Malzahn Date: Fri, 5 Jun 2026 02:00:54 +0000 Subject: [PATCH] feat: Light theme --- fabula-ultima-sheet.css | 60 ++++++++++++++++++++++++++++++++++++++++ fabula-ultima-sheet.html | 19 +++++++++++-- 2 files changed, 77 insertions(+), 2 deletions(-) diff --git a/fabula-ultima-sheet.css b/fabula-ultima-sheet.css index 4ad7cb5..f9445d3 100644 --- a/fabula-ultima-sheet.css +++ b/fabula-ultima-sheet.css @@ -964,6 +964,66 @@ input[type="number"] { font-weight: 600; } +/* ── LIGHT THEME ─────────────────────────────────── */ +[data-theme="light"] { + --bg: #f4efe4; + --surface: #ede7d9; + --surface2: #e6dfd0; + --surface3: #dcd5c3; + --border: #c8bfa8; + --border-bright: #a89878; + --teal: #1a7a76; + --teal-dim: #b8e0de; + --gold: #7a5a18; + --gold-dim: #e8d8a0; + --red: #b02a20; + --text: #2a2218; + --text-dim: #6a5f50; + --text-bright: #1a1410; + --crisis: #c0392b; +} + +[data-theme="light"] body { + background-image: + radial-gradient(ellipse at 20% 10%, rgba(26, 122, 118, 0.07) 0%, transparent 50%), + radial-gradient(ellipse at 80% 90%, rgba(122, 90, 24, 0.07) 0%, transparent 50%); +} + +[data-theme="light"] header { + background: linear-gradient(135deg, var(--surface) 0%, var(--surface3) 100%); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1); +} + +[data-theme="light"] input[type="text"]:focus, +[data-theme="light"] input[type="number"]:focus, +[data-theme="light"] textarea:focus, +[data-theme="light"] select:focus { + box-shadow: 0 0 0 2px rgba(26, 122, 118, 0.15); +} + +[data-theme="light"] .fp-pip.filled { + box-shadow: 0 0 8px rgba(26, 122, 118, 0.35); +} + +/* ── THEME TOGGLE BUTTON ─────────────────────────── */ +.btn-theme { + font-family: var(--font-display); + font-size: 0.55rem; + letter-spacing: 0.12em; + text-transform: uppercase; + padding: 7px 12px; + cursor: pointer; + border: 1px solid var(--border-bright); + background: transparent; + color: var(--text-dim); + transition: all 0.2s; +} + +.btn-theme:hover { + border-color: var(--gold-dim); + color: var(--gold); +} + /* ── RESPONSIVE ──────────────────────────────────── */ @media (max-width: 900px) { diff --git a/fabula-ultima-sheet.html b/fabula-ultima-sheet.html index 7356d8e..6247feb 100644 --- a/fabula-ultima-sheet.html +++ b/fabula-ultima-sheet.html @@ -1,5 +1,5 @@ - + @@ -9,12 +9,13 @@ href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap" rel="stylesheet"> +
- +
@@ -29,6 +30,8 @@ Saved! +
+
@@ -456,6 +459,9 @@ // ── INIT ─────────────────────────────────────────── function init() { + const savedTheme = localStorage.getItem('fabulaUltimaTheme') + || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); + document.getElementById('themeToggle').textContent = savedTheme === 'light' ? '☾ Dark' : '☀ Light'; renderStatuses(); renderFP(); renderBonds(); @@ -777,6 +783,15 @@ reader.readAsText(file); } + // ── THEME ────────────────────────────────────────── + function toggleTheme() { + const html = document.documentElement; + const goLight = html.dataset.theme !== 'light'; + html.dataset.theme = goLight ? 'light' : 'dark'; + document.getElementById('themeToggle').textContent = goLight ? '☾ Dark' : '☀ Light'; + localStorage.setItem('fabulaUltimaTheme', html.dataset.theme); + } + // Auto-save every 30s setInterval(saveSheet, 30000);