diff --git a/src/lib/styles/app.css b/src/lib/styles/app.css index e811d5ae0..04d7e63b6 100644 --- a/src/lib/styles/app.css +++ b/src/lib/styles/app.css @@ -5,6 +5,38 @@ themes: light --default; } +/* + Since we aren't (intentionally) using DaisyUI theme colors, this *loud* theme + should make missing App Builder styles easier to catch in development. +*/ +@plugin "daisyui/theme" { + name: 'debug'; + default: false; + prefersdark: false; + color-scheme: light; + + --color-base-100: red; + --color-base-200: red; + --color-base-300: red; + --color-base-content: red; + --color-primary: red; + --color-primary-content: red; + --color-secondary: red; + --color-secondary-content: red; + --color-accent: red; + --color-accent-content: red; + --color-neutral: red; + --color-neutral-content: red; + --color-info: red; + --color-info-content: red; + --color-success: red; + --color-success-content: red; + --color-warning: red; + --color-warning-content: red; + --color-error: red; + --color-error-content: red; +} + @source inline("grid-cols-{{1..12..1},none,subgrid}"); /* Allow post-(Tailwind v4) styling to use sensible class names for breakpoints */ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 251968cc8..31301556c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -3,6 +3,7 @@ import faviconHref from '$assets/icons/favicon.png'; import manifestHref from '$assets/manifestUrl.json'; import '$lib/styles/app.css'; + import { dev } from '$app/environment'; import config from '$assets/config'; import AudioPlaybackSpeed from '$lib/components/AudioPlaybackSpeed.svelte'; import CollectionModal from '$lib/components/CollectionModal.svelte'; @@ -49,6 +50,13 @@ refs.init(); } + const debugTheme = dev + ? (() => { + console.warn('DEBUG color theme enabled'); + return 'debug'; + })() + : undefined; + if (!$analytics.initialized) { analytics.init(); } @@ -137,8 +145,10 @@ {#if showPage} +