Add DaisyUI debug theme for dev server

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 */

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}
     <Sidebar>
+        <!-- `debugTheme` sets the *allegedly* unused DaisyUI theme to all-red when dev server is running -->
         <div
             id="container"
+            data-theme={debugTheme}
             data-color-theme={$theme}
             style="height:100vh;height:100dvh;margin:0;"
             style:direction={$direction}