Remove duplicate dark mode styles

[nqst]

This PR removes duplicate dark mode styles. They are currently defined twice, which is error-prone and hard to maintain.

Here, we rely on [data-theme] only. JavaScript resolves the theme and sets data-theme to light or dark in all cases, including auto mode.

Note: With these changes, dark mode won't work if JavaScript is disabled. But since Fizzy relies on JS a lot, this trade-off felt reasonable.

Changes:

• Resolves data-theme to light or dark at load time
• Cleans up CSS files significantly by removing @media (prefers-color-scheme: dark) blocks
• Removes light-dark() from syntax.css for consistency
• Adds a missing & in syntax.css to fix incorrect variable scoping in dark mode
• Mounts the theme controller in the public layout so the auto theme responds to OS appearance changes

[Copilot]

Pull request overview

This PR consolidates dark mode styling by relying exclusively on html[data-theme] (always set to light or dark), removing duplicated prefers-color-scheme CSS fallbacks and aligning syntax highlighting styles with the same approach.

Changes:

• Resolve data-theme to light/dark at load time (including “auto”) and update the theme controller to react to OS appearance changes.
• Remove @media (prefers-color-scheme: dark) fallback blocks across stylesheets in favor of html[data-theme="dark"] selectors.
• Simplify and correct syntax highlighting dark-mode scoping and replace light-dark() usage with explicit theme selectors.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
app/views/layouts/public.html.erb	Mounts the theme Stimulus controller on public pages so auto mode reacts to OS changes.
app/views/layouts/_theme_preference.html.erb	Sets documentElement.dataset.theme to a resolved light/dark value at parse-time to avoid duplicate CSS fallbacks.
app/javascript/controllers/theme_controller.js	Resolves “auto” to light/dark and listens for system theme changes to re-apply.
app/assets/stylesheets/trays.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/syntax.css	Fixes dark-mode variable scoping with & nesting and replaces light-dark() with explicit theme rules.
app/assets/stylesheets/reactions.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/notifications.css	Replaces media-query-based dark styling with html[data-theme="dark"] selector.
app/assets/stylesheets/markdown.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/inputs.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/circled-text.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/cards.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/card-columns.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/buttons.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/base.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/bar.css	Removes prefers-color-scheme fallback in favor of html[data-theme="dark"].
app/assets/stylesheets/_global.css	Removes the global prefers-color-scheme: dark fallback block now that data-theme is expected to always be set.

Comments suppressed due to low confidence (1)

app/assets/stylesheets/_global.css:373

• Removing the prefers-color-scheme fallback means users without JavaScript (or if the inline theme script fails to run) will no longer get dark mode based on system preference, since only html[data-theme="dark"] is now supported. If no-JS support matters, consider keeping a minimal prefers-color-scheme fallback (or setting data-theme server-side) so the site still respects OS appearance without JS.

    0 0.4em 0.8em -1.2em oklch(var(--lch-black) / 0.8),
    0 0.8em 1.2em -1.6em oklch(var(--lch-black) / 0.9),
    0 1.2em 1.6em -2em oklch(var(--lch-black) / 1);
}

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[nqst]

@andyra what do you think?

[andyra]

Very interested in this indeed! We attempted something similar during the development phase, but ended up going the route we did due to a flash of light mode content at first paint, even when you've set dark mode as your preference. I haven't had time to check this out on my end yet—do you think that will be an issue with your implementation?

[Copilot]

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated no new comments.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[nqst]

Thanks for the feedback, @andyra!

do you think that will be an issue with your implementation?

I've just done another round of testing on a fresh setup. All looking good! I didn't see the flash of light mode with both system and explicit dark mode, including with slow throttling.

But, of course, it would be ideal to test it in another environment and have an extra pair of eyes here :)