From 5a6fc7f976ba3dd8d65d8b4df85e607243ed81af Mon Sep 17 00:00:00 2001 From: FliesentischKing Date: Sat, 3 Oct 2026 21:32:57 +0200 Subject: [PATCH] New Themes --- AGENTS.md | 4 +- app/assets/css/tailwind.css | 509 ++++++++++++++++++++++++++---- app/components/CommentContent.vue | 3 +- app/components/ThemeSelector.vue | 9 +- app/composables/useTheme.ts | 12 +- nuxt.config.ts | 2 +- 6 files changed, 467 insertions(+), 72 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index fb641b6..725a0a3 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -2,14 +2,14 @@ ## Workflow -- Keine Headless-Browser-Verifizierung nach UI-Änderungen — der User testet selbst. Nur bei wiederholten Fehlern nachfragen/debuggen. Syntax-/Build-Checks sind weiterhin okay. +- Keine Headless-Browser-Verifizierung nach UI-Änderungen — der User testet selbst. Nur bei wiederholten Fehlern nachfragen/debuggen. Syntax-Checks sind okay; `npm run build` nur ausführen, wenn der User es ausdrücklich will. - Dev-Server: `npm run dev` (Port 3000). Der User lässt ihn meist selbst laufen — nicht blind starten, erst prüfen ob bereits aktiv. - DB: MariaDB via `docker-compose.yml` (Container `nuxt-shadcn-demo-db`), URL in `DATABASE_URL`. Migrationen: `npm run db:generate` (Schema → SQL), `npm run db:migrate` (anwenden; im Dev-Modus auch automatisch per Nitro-Plugin). ## Conventions - Vue 3 ` diff --git a/app/composables/useTheme.ts b/app/composables/useTheme.ts index 6135b4c..1643ac5 100644 --- a/app/composables/useTheme.ts +++ b/app/composables/useTheme.ts @@ -1,9 +1,17 @@ -export type ThemeName = 'standard' | 'discord' | 'cyberpunk' | 'spring' | 'terminal' | 'infoseer' | 'homebrew' | 'florense' | 'kawi-green' | 'clonz' | 'clawmorphism' | 'realmorphism' | 'amber' | 'neo' | 'neo-pink' | 'neo-mint' +export const THEME_NAMES = ['standard', 'discord', 'cyberpunk', 'spring', 'terminal', 'infoseer', 'homebrew', 'florense', 'kawi-green', 'clonz', 'clawmorphism', 'realmorphism', 'amber', 'sunny-sprout', 'spotify', 'nordic', 'ss', 'amethyst-haze', 'deep-wine', 'my-claude', 'neo'] as const + +export type ThemeName = typeof THEME_NAMES[number] export function useTheme() { - return useCookie('color-mode', { + const theme = useCookie('color-mode', { default: () => 'standard', maxAge: 60 * 60 * 24 * 365, sameSite: 'lax', }) + + if (!THEME_NAMES.includes(theme.value)) { + theme.value = 'standard' + } + + return theme } diff --git a/nuxt.config.ts b/nuxt.config.ts index 1274708..93c59ce 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -9,7 +9,7 @@ export default defineNuxtConfig({ { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' }, { rel: 'stylesheet', - href: 'https://fonts.googleapis.com/css2?family=Archivo+Black&family=Fira+Sans:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Jua&family=Lora:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Workbench&family=Figtree:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap', + href: 'https://fonts.googleapis.com/css2?family=Archivo+Black&family=Fira+Sans:wght@400;500;600;700&family=Fira+Code:wght@400;500;600;700&family=Geist:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&family=Source+Serif+Pro:wght@400;500;600;700&family=Source+Serif+4:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Jua&family=Lora:wght@500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&family=Newsreader:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Workbench&family=Figtree:wght@400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap', }, ], },