feat(studio): add system theme option and theme the loading shell

[iipanda]

Summary

• Replace the admin header's light/dark toggle with a System / Light / Dark dropdown.
• Change the default Studio theme from light → system so Studio follows the user's OS preference out of the box.
• Theme the bootstrap loading shell (Loading Studio): it now resolves the applied theme synchronously from localStorage + prefers-color-scheme and renders a matching dark palette, so there's no light flash while the runtime loads. The shell also reacts to OS theme changes while loading.

Notes

• ThemePickerMenu is a small new component exported from page-header.tsx; the existing enableSystem flag on ThemeProvider is unchanged.
• StudioShellFrame now accepts an optional shellTheme prop (defaulted to "light"). The parent Studio component resolves the theme with a hook so StudioShellFrame itself remains pure and its existing unit tests (which call it as a plain function) keep working.

Test plan

• bun test --cwd packages/studio ./src/lib/runtime-ui/adapters/next-themes.test.ts ./src/lib/studio.test.ts ./src/lib/runtime-ui/components/layout/page-header.test.tsx (passes locally)
• Open Studio with no stored preference → loading shell + runtime match OS theme
• Pick Light → applies immediately; reload → stays Light; loading shell uses light palette
• Pick Dark → applies immediately; reload → stays Dark; loading shell uses dark palette
• Pick System → flips live when OS theme toggles; loading shell tracks OS during bootstrap

Summary by CodeRabbit

• New Features

  • Added a theme picker dropdown with System/Light/Dark options and visual Sun/Moon indicators (replaces single toggle).
  • Studio now defaults to following the system theme.

• Improvements

  • Shell styling updated to better support light/dark transitions and respect applied theme.

• Tests

  • Added unit tests covering theme resolution, picker rendering, and shell theme behavior.

• Chores

  • Release changeset added for theme-system-default.

[iipanda]

@coderabbitai review

[coderabbitai]

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6c2db9ba-281e-48c9-9388-41ea0c935757

📥 Commits

Reviewing files that changed from the base of the PR and between 674e075 and f8e2a23.

📒 Files selected for processing (1)

• .changeset/theme-system-default.md

---

📝 Walkthrough

Walkthrough

Default theme changed from "light" to "system"; a three-option ThemePickerMenu replaced the single toggle; shell theme resolution, persistence, and system-preference listeners were added and the resolved theme is applied via data-mdcms-theme CSS attributes.

Changes

Cohort / File(s)	Summary
Theme Provider Configuration packages/studio/src/lib/remote-studio-app.tsx	ThemeProvider default changed from "light" to "system".
Theme Resolution Logic & Shell Integration packages/studio/src/lib/studio-component.tsx, packages/studio/src/lib/studio.test.ts	Added ShellAppliedTheme type, resolveShellAppliedTheme() function, useResolvedShellTheme() hook (reads localStorage, uses matchMedia, listens for changes), shellTheme prop on StudioShellFrame, and CSS rules toggled by data-mdcms-theme. Tests added for shell theme defaults and resolution.
Theme UI Components & Tests packages/studio/src/lib/runtime-ui/components/layout/page-header.tsx, packages/studio/src/lib/runtime-ui/components/layout/page-header.test.tsx	Replaced single dark-mode toggle with ThemePickerMenu offering "system", "light", "dark" radio options, icons, and aria attributes; added renderer test verifying trigger, aria-label, and rendered markup.
Next-Themes Adapter Tests packages/studio/src/lib/runtime-ui/adapters/next-themes.test.ts	Added tests covering resolveThemePreference, readStoredThemePreference, and resolveAppliedTheme behavior when defaultTheme is "system" and interactions with enableSystem and OS preference.
Release Notes / Changeset .changeset/theme-system-default.md	New changeset documenting system-default theme, theme picker, and shell theme behavior change.

Sequence Diagram

sequenceDiagram
    participant User
    participant PageHeader as Theme Picker UI
    participant ThemeProvider as ThemeProvider
    participant Storage as localStorage
    participant Studio as Studio (useResolvedShellTheme)
    participant System as SystemPrefs (prefers-color-scheme)
    participant ShellDOM as Shell DOM

    User->>PageHeader: Select theme (system/light/dark)
    PageHeader->>ThemeProvider: setTheme(selected)
    ThemeProvider->>Storage: persist preference
    ThemeProvider->>Studio: context update / notify

    Studio->>Storage: read stored preference
    Studio->>System: query prefers-color-scheme
    Studio->>Studio: resolveShellAppliedTheme(stored, system)
    Studio->>ShellDOM: set `data-mdcms-theme` (light/dark)

    System->>Studio: preference change event
    Studio->>Studio: recompute applied theme
    Studio->>ShellDOM: update `data-mdcms-theme`

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• CMS-188 | Visual refresh for Studio runtime bundle loading screen #74: touches packages/studio/src/lib/studio-component.tsx and shell/style injection.

Poem

🐰 I nibble code and toggle themes,
System, light, or dark it seems,
A picker hops into the header,
Sun, moon, and system — all together,
The studio shines in easiest dreams.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 9.09% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title accurately captures the primary changes: adding a system theme option and theming the loading shell, which align directly with the main objectives and file modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/system-theme-option

Warning

Tools execution failed with the following error:

Failed to run tools: 13 INTERNAL: Received RST_STREAM with code 2 (Internal server error)

---

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