fix: apply accent colours via css vars

[danielroe]

this avoids a hydration issue on settings page with swatches, and also decreases JS manipulations bc the css variables are dark/light theme aware

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 7, 2026 11:55pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 7, 2026 11:55pm
npmx-lunaria	Ignored		Feb 7, 2026 11:55pm

[codecov]

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/composables/useSettings.ts	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request refactors the accent colour system to use CSS custom properties instead of hardcoded colour mappings. Six new colour swatch variables (--swatch-coral, --swatch-amber, --swatch-emerald, --swatch-sky, --swatch-violet, --swatch-magenta) are defined in the stylesheet with oklch values. The accent colour picker, settings composable, and prehydration utilities have been updated to reference these CSS variables by ID rather than managing a separate colour palette object, centralising colour definitions in CSS and reducing redundant logic.

Possibly related PRs

• feat: polish ui and ux on settings page #1026: Modifies the AccentColorPicker.vue file's swatch presentation, including background and class adjustments for swatches.

Suggested reviewers

• RamaHerbin
• shuuji3

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the motivation (hydration issue, theme awareness) for refactoring accent colours to use CSS variables.

_{✏️ 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 fix/colors

---

No actionable comments were generated in the recent review. 🎉

🧹 Recent nitpick comments

app/utils/prehydrate.ts (1)

12-13: Ensure the hardcoded colour IDs stay synchronised with CSS variables.

The accentColorIds Set must be kept in sync with the --swatch-* variables defined in main.css. Since this callback is stringified by Nuxt and cannot reference external constants, consider adding a comment referencing the CSS file or adding a build-time check to catch drift.

📝 Suggested comment for maintainability

     // Callback is stringified by Nuxt - external variables won't be available.
     // All constants must be hardcoded inside the callback.
-    // Valid accent color IDs (must match --swatch-* variables defined in main.css)
+    // Valid accent color IDs - IMPORTANT: keep in sync with:
+    // - CSS variables in app/assets/main.css (--swatch-* definitions)
+    // - ACCENT_COLORS in shared/utils/constants.ts
     const accentColorIds = new Set(['coral', 'amber', 'emerald', 'sky', 'violet', 'magenta'])

---

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