docs(integrations): fallback to auto for better dark mode support on vite ssr

[atinux]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)

📚 Description

Avoid FOUC when value was 'auto' after first load.

[coderabbitai]

📝 Walkthrough

Walkthrough

Documentation update to the SSR integration guide modifying three example blocks. Changes: navigation.icon value updated from i-simple-icons-markdown to i-lucide-server; some Vue imports adjusted to use import type { DefineComponent } from 'vue' for type-only usage; color-scheme handling now defaults the vueuse-color-scheme localStorage value to 'auto' using || 'auto' and checks theme === 'auto' for media-query fallback rather than theme === null. Other edits are formatting; no exported/public API changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: updating documentation to fallback to 'auto' for better dark mode support on Vite SSR, which aligns with the core fix addressing FOUC issues.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description directly addresses the changes: avoiding FOUC when color-mode value is 'auto' after first load, which aligns with the color scheme handling updates in the documentation.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch docs/ssr-color-mode

---

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 and usage tips.}

[coderabbitai]

🤖 Fix all issues with AI agents

Verify each finding against the current code and only fix it if needed.


In `@docs/content/docs/1.getting-started/6.integrations/6.ssr.md`:
- Around line 121-122: The current snippet should default the stored scheme to
'auto' and treat explicit 'auto' the same as missing value so system preference
is respected; update the logic around theme (from
localStorage.getItem('vueuse-color-scheme')) so theme is set to 'auto' when
falsy and change the condition to check theme === 'dark' || (theme === 'auto' &&
window.matchMedia('(prefers-color-scheme: dark)').matches), referencing the
theme variable, localStorage.getItem('vueuse-color-scheme') and
window.matchMedia to ensure dark mode is applied when either explicitly set to
'dark' or when 'auto' (explicit or default) and the media query matches.

🧹 Nitpick comments (1)

🤖 Fix all nitpicks with AI agents

Verify each finding against the current code and only fix it if needed.


In `@docs/content/docs/1.getting-started/6.integrations/6.ssr.md`:
- Around line 121-122: The current snippet should default the stored scheme to
'auto' and treat explicit 'auto' the same as missing value so system preference
is respected; update the logic around theme (from
localStorage.getItem('vueuse-color-scheme')) so theme is set to 'auto' when
falsy and change the condition to check theme === 'dark' || (theme === 'auto' &&
window.matchMedia('(prefers-color-scheme: dark)').matches), referencing the
theme variable, localStorage.getItem('vueuse-color-scheme') and
window.matchMedia to ensure dark mode is applied when either explicitly set to
'dark' or when 'auto' (explicit or default) and the media query matches.

docs/content/docs/1.getting-started/6.integrations/6.ssr.md (1)

121-122: LGTM! This fix correctly handles the 'auto' color scheme value.

The updated logic now properly handles when vueuse-color-scheme is explicitly set to 'auto' in localStorage. Previously, if a user had 'auto' stored, the old condition checking for null would fail, and dark mode wouldn't be applied even when the system preferred dark mode. By defaulting to 'auto' and checking for it in the condition, the media query is now correctly evaluated in both cases:

• When no value is stored (defaults to 'auto')
• When 'auto' is explicitly stored

This effectively prevents FOUC on initial SSR load as described in the PR objectives.

Optional: Consider defensive error handling

For production use, users might want to wrap localStorage access in a try-catch, as it can throw errors in restricted contexts (e.g., some private browsing modes or sandboxed iframes). However, keeping documentation examples simple and clear is often more valuable than defensive code.

 <script>
+try {
   const theme = localStorage.getItem('vueuse-color-scheme') || 'auto';
   if (theme === 'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
       document.documentElement.classList.add('dark');
   } else {
       document.documentElement.classList.remove('dark');
   }
+} catch (e) {
+  // Fallback to system preference if localStorage is unavailable
+  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.classList.add('dark');
+  }
+}
 </script>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/content/docs/1.getting-started/6.integrations/6.ssr.md` around lines 121
- 122, The current snippet should default the stored scheme to 'auto' and treat
explicit 'auto' the same as missing value so system preference is respected;
update the logic around theme (from localStorage.getItem('vueuse-color-scheme'))
so theme is set to 'auto' when falsy and change the condition to check theme ===
'dark' || (theme === 'auto' && window.matchMedia('(prefers-color-scheme:
dark)').matches), referencing the theme variable,
localStorage.getItem('vueuse-color-scheme') and window.matchMedia to ensure dark
mode is applied when either explicitly set to 'dark' or when 'auto' (explicit or
default) and the media query matches.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6062

commit: 95fc196