pokemon/nuzlocke-tracker
1
1
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add dark/light mode toggle with adaptive badge colors

Browse Source 
Implement theme switching via sun/moon toggle in nav bar. Dark
remains the default; light mode overrides surface, text, border,
accent, and status color tokens. Preference persists in localStorage
and falls back to prefers-color-scheme. An inline script in
index.html prevents flash of wrong theme on load.

Define a Tailwind v4 @custom-variant for light mode and update all
badge components (encounter method, rule, condition) to use
light:bg-{color}-100 / light:text-{color}-700 for readable contrast
on light surfaces.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julian Tabel
2026-02-20 19:45:12 +01:00
parent cb35bf161e
commit a381633413
8 changed files with 224 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/index.html
View File

@@ -17,6 +17,15 @@
<link rel="manifest" href="/site.webmanifest" />
</head>
<body>
<script>
(function() {
var t = localStorage.getItem('ant-theme');
if (t === 'light' || (!t && window.matchMedia('(prefers-color-scheme: light)').matches)) {
document.documentElement.setAttribute('data-theme', 'light');
document.documentElement.style.colorScheme = 'light';
}
})();
</script>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>