falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Dan Mode (third theme), Pico CSS notes, cycle theme toggle

Browse Source 
Dan Mode: pure white backgrounds, electric blue text (#0000ff), nuclear
yellow accents (#ffff00), hot magenta borders (#ff00ff), red labels,
glowing box-shadows. Maximum saturation. Hostile to human vision by design.

Theme toggle now cycles light → dark → dan → light (icons: 🌙 😎 ☀️).

PICO_CSS.md: documents [role=button] color clobber, palette scoping rules,
and theme toggling pattern for future reference.
This commit is contained in:
Falkan
2026-03-17 11:28:42 -04:00
parent 0f648ab9b8
commit da99b63916
3 changed files with 175 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/routes/+layout.svelte
View File

@@ -5,25 +5,28 @@
let { children } = $props();
// Resolve initial theme: stored pref > OS preference
function resolveInitialTheme(): 'light' | 'dark' {
type Theme = 'light' | 'dark' | 'dan';
const CYCLE: Theme[] = ['light', 'dark', 'dan'];
const ICONS: Record<Theme, string> = { light: '🌙', dark: '😎', dan: '☀️' };
function resolveInitialTheme(): Theme {
if (!browser) return 'light';
const stored = localStorage.getItem('theme');
if (stored === 'light' || stored === 'dark') return stored;
if (stored === 'light' || stored === 'dark' || stored === 'dan') return stored;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
let theme = $state<'light' | 'dark'>(resolveInitialTheme());
let theme = $state<Theme>(resolveInitialTheme());
// Apply theme to <html> and persist
$effect(() => {
if (!browser) return;
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
});
function toggleTheme() {
theme = theme === 'light' ? 'dark' : 'light';
function cycleTheme() {
const next = CYCLE[(CYCLE.indexOf(theme) + 1) % CYCLE.length];
theme = next;
}
</script>
@@ -37,8 +40,8 @@
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li>
<button class="theme-toggle outline secondary" onclick={toggleTheme} aria-label="Toggle light/dark mode">
{theme === 'light' ? '🌙' : '☀️'}
<button class="theme-toggle outline secondary" onclick={cycleTheme} aria-label="Toggle theme">
{ICONS[theme]}
</button>
</li>
</ul>