Repository navigation
fix(devtools): persist the selected theme across reloads - #1135
ahmetomerv wants to merge 1 commit into
Conversation
The v3 client applied the host app's color mode with `immediate: true`, so a reload overwrote the theme stored in `nuxt-devtools-color-mode` and reset a selected dark theme to light. Track explicit choices with a separate override key. Host sync only applies while no explicit choice exists. Legacy stored light/dark values are preserved as explicit choices because the old value cannot tell whether the user or the host sync wrote it. Storage helpers degrade safely when `localStorage` is unavailable. Share the color-mode storage keys through the UI kit package instead of duplicating them between packages. Fixes nuxt#970
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
📝 Walkthrough
Merge Risk: ⚪ Minimal · up to
|
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage |  |
Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 4 files. (2 skipped: 2… | Write docstrings for the functions missing them to satisfy the coverage threshold. |
-
Check name Status Explanation Title check The title clearly and concisely describes the main change: persisting the selected DevTools theme across reloads. Description check The description directly explains the theme persistence fix, host synchronization behavior, storage safeguards, tests, and v3 scope. Linked Issues check Issue #970requires the selected dark theme to persist after refresh.NDarkToggle.vuerecords an explicit override,shouldApplyHostColorMode()preserves legacylight/darkvalues, andapp.vue…Out of Scope Changes check The changes stay within the color-mode persistence fix for v3. The shared constants, guarded storage helpers, client integration, toggle integration, and focused unit tests directly support issue #970…Full details: Linked Issues check
-
Explanation
Issue
#970requires the selected dark theme to persist after refresh.NDarkToggle.vuerecords an explicit override,shouldApplyHostColorMode()preserves legacylight/darkvalues, andapp.vueskips host synchronization when the override is explicit. Fresh installs still follow the host.packages/devtools/test/color-mode.test.tscovers explicit choices, legacy values, fresh installs, host sync, and unavailable storage.
Full details: Out of Scope Changes check
-
Explanation
The changes stay within the color-mode persistence fix for v3. The shared constants, guarded storage helpers, client integration, toggle integration, and focused unit tests directly support issue
#970. No unrelated behavior is demonstrated.
-
Full details: Docstring Coverage
-
Explanation
Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 4 files. (2 skipped: 2 unsupported.)
Resolution
Write docstrings for the functions missing them to satisfy the coverage threshold.
✨ Finishing Touches
-
🧪 Generate unit tests (beta)
-
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Warning
Some tools did not complete. Review the errors below.
🔧 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.
Comment @coderabbitai help to get the list of available commands.
Fixes #970
The Nuxt DevTools V3 watched the host app's color mode and applied it with
immediate: true. On reload, the host app reported its own light/dark mode and overwrote the selection stored innuxt-devtools-color-mode, so a dark theme reset to light.This PR adds an explicit override marker:
localStorageaccess is guarded, so restricted storage contexts do not break the client.Demo
Screen.Recording.2026-10-23.at.16.26.34.mov
Upgrade behavior
The old storage value cannot distinguish a mode chosen by the user from a mode written by host sync. To avoid resetting an existing preference, any stored legacy
light/darkvalue is preserved as an explicit choice. Matching modes are therefore pinned too; users can reset local settings to resume following the host.After an explicit choice, DevTools no longer follows host theme changes until local settings are reset.
Shared storage keys
The color-mode storage keys now live in
packages/devtools-ui-kit/src/constants.ts. BothNDarkToggleand the client import the same constants, so the keys cannot drift between packages.Scope
This targets
v3only. Onmain/v4 the color mode is derived from the embedder or OS and does not read these storage keys.Verification
pnpm build— passedpnpm lint— passedpnpm typecheck— passedpnpm -C packages/devtools test:unit— passednuxi generate client— passedNew unit tests cover fresh installs, explicit overrides, host-following mode, legacy
lightanddarkpreferences, and unavailablelocalStorage.