From 4f825d0f0083e5388d5dfb427fc74f676217abe1 Mon Sep 17 00:00:00 2001 From: pyr0ball Date: Sat, 4 Apr 2026 22:22:04 -0700 Subject: [PATCH] feat(#45): manual theme switcher (light/dark/solarized/colorblind-safe) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - theme.css: explicit [data-theme] blocks for light, dark, solarized-dark, solarized-light, colorblind (Wong 2011 palette); auto-dark media query updated to :root:not([data-theme]) so explicit themes always win - useTheme.ts: singleton composable — setTheme(), restoreTheme(), initTheme(); persists to localStorage + API; coordinates with hacker mode exit - AppNav.vue: theme + + + +
@@ -79,7 +95,10 @@ import { } from '@heroicons/vue/24/outline' import { useDigestStore } from '../stores/digest' +import { useTheme, THEME_OPTIONS, type Theme } from '../composables/useTheme' + const digestStore = useDigestStore() +const { currentTheme, setTheme, restoreTheme } = useTheme() // Logo click easter egg — 9.6: Click the Bird 5× rapidly const logoClickCount = ref(0) @@ -104,8 +123,8 @@ const isHackerMode = computed(() => ) function exitHackerMode() { - delete document.documentElement.dataset.theme localStorage.removeItem('cf-hacker-mode') + restoreTheme() } const _apiBase = import.meta.env.BASE_URL.replace(/\/$/, '') @@ -315,6 +334,47 @@ const mobileLinks = [ background: var(--color-surface-alt); } +/* ── Theme picker ───────────────────────────────────── */ +.sidebar__theme { + padding: var(--space-2) var(--space-3); + border-top: 1px solid var(--color-border-light); + display: flex; + flex-direction: column; + gap: var(--space-1); +} + +.sidebar__theme-label { + font-size: var(--text-xs); + color: var(--color-text-muted); + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.05em; +} + +.sidebar__theme-select { + width: 100%; + padding: var(--space-2) var(--space-3); + background: var(--color-surface-alt); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + color: var(--color-text); + font-size: var(--text-sm); + font-family: var(--font-body); + cursor: pointer; + appearance: auto; + transition: border-color 150ms ease, background 150ms ease; +} + +.sidebar__theme-select:hover { + border-color: var(--color-primary); + background: var(--color-surface-raised); +} + +.sidebar__theme-select:focus-visible { + outline: 2px solid var(--color-accent); + outline-offset: 2px; +} + /* ── Mobile tab bar (<1024px) ───────────────────────── */ .app-tabbar { display: none; /* hidden on desktop */ diff --git a/web/src/composables/useEasterEgg.ts b/web/src/composables/useEasterEgg.ts index 19f35f9..425b2d1 100644 --- a/web/src/composables/useEasterEgg.ts +++ b/web/src/composables/useEasterEgg.ts @@ -1,4 +1,5 @@ import { onMounted, onUnmounted } from 'vue' +import { useTheme } from './useTheme' const KONAMI = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','b','a'] const KONAMI_AB = ['ArrowUp','ArrowUp','ArrowDown','ArrowDown','ArrowLeft','ArrowRight','ArrowLeft','ArrowRight','a','b'] @@ -31,8 +32,10 @@ export function useHackerMode() { function toggle() { const root = document.documentElement if (root.dataset.theme === 'hacker') { - delete root.dataset.theme localStorage.removeItem('cf-hacker-mode') + // Let useTheme restore the user's chosen theme rather than just deleting data-theme + const { restoreTheme } = useTheme() + restoreTheme() } else { root.dataset.theme = 'hacker' localStorage.setItem('cf-hacker-mode', 'true') diff --git a/web/src/composables/useTheme.ts b/web/src/composables/useTheme.ts new file mode 100644 index 0000000..1407a86 --- /dev/null +++ b/web/src/composables/useTheme.ts @@ -0,0 +1,82 @@ +/** + * useTheme — manual theme picker for Peregrine. + * + * Themes: 'auto' | 'light' | 'dark' | 'solarized-dark' | 'solarized-light' | 'colorblind' + * Persisted in localStorage under 'cf-theme'. + * Applied via document.documentElement.dataset.theme. + * 'auto' removes the attribute so the @media prefers-color-scheme rule takes effect. + * + * Hacker mode sits on top of this system — toggling it off calls restoreTheme() + * so the user's chosen theme is reinstated rather than dropping back to auto. + */ + +import { ref, readonly } from 'vue' +import { useApiFetch } from './useApi' + +export type Theme = 'auto' | 'light' | 'dark' | 'solarized-dark' | 'solarized-light' | 'colorblind' + +const STORAGE_KEY = 'cf-theme' +const HACKER_KEY = 'cf-hacker-mode' + +export const THEME_OPTIONS: { value: Theme; label: string; icon: string }[] = [ + { value: 'auto', label: 'Auto', icon: '⬡' }, + { value: 'light', label: 'Light', icon: '☀' }, + { value: 'dark', label: 'Dark', icon: '🌙' }, + { value: 'solarized-light', label: 'Solarized Light', icon: '🌤' }, + { value: 'solarized-dark', label: 'Solarized Dark', icon: '🌃' }, + { value: 'colorblind', label: 'Colorblind Safe', icon: '♿' }, +] + +// Module-level singleton so all consumers share the same reactive state. +const _current = ref(_load()) + +function _load(): Theme { + return (localStorage.getItem(STORAGE_KEY) as Theme | null) ?? 'auto' +} + +function _apply(theme: Theme) { + const root = document.documentElement + if (theme === 'auto') { + delete root.dataset.theme + } else { + root.dataset.theme = theme + } +} + +export function useTheme() { + function setTheme(theme: Theme) { + _current.value = theme + localStorage.setItem(STORAGE_KEY, theme) + _apply(theme) + // Best-effort persist to server; ignore failures (works offline / local LLM) + useApiFetch('/api/settings/theme', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ theme }), + }).catch(() => {}) + } + + /** Restore user's chosen theme — called when hacker mode or other overlays exit. */ + function restoreTheme() { + // Hacker mode clears itself; we only restore if it's actually off. + if (localStorage.getItem(HACKER_KEY) === 'true') return + _apply(_current.value) + } + + /** Call once at app boot to apply persisted theme before first render. */ + function initTheme() { + // Hacker mode takes priority on restore. + if (localStorage.getItem(HACKER_KEY) === 'true') { + document.documentElement.dataset.theme = 'hacker' + } else { + _apply(_current.value) + } + } + + return { + currentTheme: readonly(_current), + setTheme, + restoreTheme, + initTheme, + } +}