fix: add default theme for no-js users

[alexdln]

I simply added that if the theme isn't defined, the colors from the dark theme are used.

This won't be a problem for JS users, as the browser won't apply the colors until the head is complete, and nuxt-theme determines the current theme in the head.

I used :not() to avoid unnecessary variables and improve debugging experience

Closes #939 #1059

[vercel]

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

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

2 Skipped Deployments

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request modifies the main CSS file to add a new CSS rule that applies theme-related custom properties to the root selector when the theme is not light or explicitly dark. This change introduces centralized definitions for background, foreground, border, accent, syntax highlighting, and badge colour variables in a combined root selector. The modification is purely additive with no deletions, reorganising dark-theme variable definitions.

Possibly related issues

• Issue 1059: The addition of root-level dark/non-light CSS custom properties directly supports making the dark theme the default so that themes display correctly without requiring JavaScript execution.

Possibly related PRs

• PR 861: The PR centralizes dark/non-light foreground CSS variables that are relied upon by Modal component changes to fix theme text visibility through custom property switching.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description clearly explains the change: adding default dark theme colors for no-JS users using the :not() CSS selector, with rationale for why JS users are unaffected.
Linked Issues check	✅ Passed	The pull request adds default dark theme colours for no-JS users by implementing CSS custom properties under a :not() selector, directly addressing the requirement to provide theme defaults when JS is unavailable.
Out of Scope Changes check	✅ Passed	All changes are scoped to CSS theme variable declarations in main.css, directly related to the theme default objective with no unrelated 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
• Post copyable unit tests in a comment

---

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

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/assets/main.css (1)

128-139: ⚠️ Potential issue | 🟡 Minor

High contrast mode doesn't cover no-JS users.

The prefers-contrast: more media query targets only :root[data-theme='dark'], but no-JS users will have no data-theme attribute set. Consider updating the selector to match the pattern used above:

Proposed fix

 `@media` (prefers-contrast: more) {
-  :root[data-theme='dark'] {
+  :root:not([data-theme='light']),
+  :root[data-theme='dark'] {
     /* text colors */
     --fg: oklch(1 0 0);

[RamaHerbin]

LGTM