Add DaisyUI debug theme for dev server

[benpaj-cps]

Related to #1037 and the corresponding PR at #1047. Missing SAB colors that fall through to DaisyUI defaults should now show as red during development to increase visibility. This occurs only when the dev server is running since that's when SvelteKit's dev var is true.

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • Added a development-only DaisyUI theme intended for visual diagnostics, with a distinctive red color scheme to make styling states immediately noticeable.
  • When running in development mode, the app now automatically activates this diagnostics theme.

• Bug Fixes

  • Improves detectability of missing, misconfigured, or incorrect theme-related styling during development by making theme activation and color tokens visibly stand out.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1cc458aa-5e7d-4d2c-befa-41295067d9fe

📥 Commits

Reviewing files that changed from the base of the PR and between 7b93116 and 570c744.

📒 Files selected for processing (1)

• src/routes/+layout.svelte

🚧 Files skipped from review as they are similar to previous changes (1)

• src/routes/+layout.svelte

---

📝 Walkthrough

Walkthrough

A non-default DaisyUI debug theme sets design tokens to red. The main layout selects this theme in development mode, logs a warning, and leaves the theme unset otherwise.

Changes

Development debug theme

Layer / File(s)	Summary
Define debug theme src/lib/styles/app.css	Registers a non-default light DaisyUI theme with red base, content, accent, and semantic color tokens.
Activate theme in development src/routes/+layout.svelte	Uses the development flag to assign data-theme="debug" and log a warning during development; otherwise leaves data-theme unset.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Suggested reviewers: chrisvire

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a DaisyUI debug theme for development.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[benpaj-cps]

Marking this as draft pending fixing this:

(when running build and preview).

[chrisvire]

Use:

    import { dev } from '$app/environment';

Instead of using .env.development

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/lib/styles/app.css`:
- Around line 18-37: Update every --color-* custom property in the theme token
block to use the raw red color value without quotes, preserving the existing
token names and values.

In `@src/routes/`+layout.svelte:
- Around line 144-149: Update the non-dev branch of the data-theme expression in
the layout markup to return the existing light theme name instead of default,
while preserving the dev branch’s debug theme behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4a9e189d-efbd-44d3-a8be-4cc43557da47

📥 Commits

Reviewing files that changed from the base of the PR and between 28f2c8b and 1ac1e7b.

📒 Files selected for processing (2)

• src/lib/styles/app.css
• src/routes/+layout.svelte

[chrisvire]

This would be a bit cleaner:

<script>
    const debugTheme = dev
        ? (() => {
              console.warn('DEBUG color theme enabled');
              return 'debug';
          })()
        : undefined;
</script>

<div
    id="container"
    data-theme={debugTheme}
    data-color-theme={$theme}
    style="height:100vh;height:100dvh;margin:0;"
    style:direction={$direction}
>

[chrisvire]

Good job! I hope this will help us find areas were we are not correctly theming the app.