drew/fabula-ultima-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Light theme

Browse Source
This commit is contained in:
Drew Malzahn
2026-06-05 02:00:54 +00:00
parent 75bdf92743
commit 74efbe9c1b
2 changed files with 77 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
fabula-ultima-sheet.css
View File

@@ -964,6 +964,66 @@ input[type="number"] {
font-weight: 600; 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 ──────────────────────────────────── */ /* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 900px) { @media (max-width: 900px) {

19
fabula-ultima-sheet.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
@@ -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" 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"> rel="stylesheet">
<link rel="stylesheet" href="fabula-ultima-sheet.css"> <link rel="stylesheet" href="fabula-ultima-sheet.css">
<script>(function () { var t = localStorage.getItem('fabulaUltimaTheme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); document.documentElement.dataset.theme = t; })()</script>
</head> </head>
<body> <body>
<header> <header>
<div class="logo">Fabula Ultima — Character Sheet</div> <div class="logo">Fabula Ultima</div>
<div class="tabs"> <div class="tabs">
<button class="tab active" onclick="switchTab('main')">Character</button> <button class="tab active" onclick="switchTab('main')">Character</button>
<button class="tab" onclick="switchTab('classes')">Classes</button> <button class="tab" onclick="switchTab('classes')">Classes</button>
@@ -29,6 +30,8 @@
<input type="file" id="importFileInput" accept=".json,application/json" style="display:none" <input type="file" id="importFileInput" accept=".json,application/json" style="display:none"
onchange="handleImportFile(this)"> onchange="handleImportFile(this)">
<span class="save-status" id="saveStatus">Saved!</span> <span class="save-status" id="saveStatus">Saved!</span>
<div class="toolbar-sep"></div>
<button class="btn-theme" id="themeToggle" onclick="toggleTheme()">☀ Light</button>
</div> </div>
</header> </header>
@@ -456,6 +459,9 @@
// ── INIT ─────────────────────────────────────────── // ── INIT ───────────────────────────────────────────
function 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(); renderStatuses();
renderFP(); renderFP();
renderBonds(); renderBonds();
@@ -777,6 +783,15 @@
reader.readAsText(file); 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 // Auto-save every 30s
setInterval(saveSheet, 30000); setInterval(saveSheet, 30000);