From 18a85a30f4282b5d07528eb8e1dd8ff7617190d2 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 17 Feb 2026 23:48:10 +0000 Subject: Add 4 CSS style themes with runtime switcher Adds a style theme system that layers additional CSS files on top of the base stylesheet. Themes are loaded/unloaded dynamically via tags. - Default: existing look, unchanged - Refined: typographic rhythm fixes, consistent spacing on settings page - Terminal: monospace, dark phosphor CRT aesthetic (scanlines, cyan glow) - Codex: book/Tufte-inspired with warm paper tones, serif type, fleurons - Sakura: Japanese-inspired calm aesthetic (named for neko = cat) Each theme supports both light and dark mode. Style selection persists in localStorage and is independent of the light/dark toggle. https://claude.ai/code/session_01Jv3c8GdaDQMm5WYwHUJMVe --- frontend-vanilla/src/store.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'frontend-vanilla/src/store.ts') diff --git a/frontend-vanilla/src/store.ts b/frontend-vanilla/src/store.ts index dc79339..bfbc55e 100644 --- a/frontend-vanilla/src/store.ts +++ b/frontend-vanilla/src/store.ts @@ -1,6 +1,6 @@ import type { Feed, Item, Category } from './types.ts'; -export type StoreEvent = 'feeds-updated' | 'tags-updated' | 'items-updated' | 'active-feed-updated' | 'active-tag-updated' | 'loading-state-changed' | 'filter-updated' | 'search-updated' | 'theme-updated' | 'sidebar-toggle'; +export type StoreEvent = 'feeds-updated' | 'tags-updated' | 'items-updated' | 'active-feed-updated' | 'active-tag-updated' | 'loading-state-changed' | 'filter-updated' | 'search-updated' | 'theme-updated' | 'sidebar-toggle' | 'style-theme-updated'; export type FilterType = 'unread' | 'all' | 'starred'; @@ -34,6 +34,7 @@ export class Store extends EventTarget { theme: string = localStorage.getItem('neko-theme') || 'light'; fontTheme: string = localStorage.getItem('neko-font-theme') || 'default'; headingFontTheme: string = localStorage.getItem('neko-heading-font-theme') || 'default'; + styleTheme: string = localStorage.getItem('neko-style-theme') || 'default'; sidebarVisible: boolean = getInitialSidebarVisible(); setFeeds(feeds: Feed[]) { @@ -108,6 +109,12 @@ export class Store extends EventTarget { this.emit('theme-updated'); } + setStyleTheme(styleTheme: string) { + this.styleTheme = styleTheme; + localStorage.setItem('neko-style-theme', styleTheme); + this.emit('style-theme-updated'); + } + setSidebarVisible(visible: boolean) { this.sidebarVisible = visible; setSidebarCookie(visible); -- cgit v1.2.3