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

19
fabula-ultima-sheet.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" data-theme="dark">
<head>
<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"
rel="stylesheet">
<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>
<body>
<header>
<div class="logo">Fabula Ultima — Character Sheet</div>
<div class="logo">Fabula Ultima</div>
<div class="tabs">
<button class="tab active" onclick="switchTab('main')">Character</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"
onchange="handleImportFile(this)">
<span class="save-status" id="saveStatus">Saved!</span>
<div class="toolbar-sep"></div>
<button class="btn-theme" id="themeToggle" onclick="toggleTheme()">☀ Light</button>
</div>
</header>
@@ -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);