feat: add dark mode support via prefers-color-scheme

[alok]

Summary

Add automatic dark mode support that respects operating system preferences using the @media (prefers-color-scheme: dark) CSS media query.

• Add new CSS custom properties for backgrounds, borders, links, shadows, and message colors
• verso-vars.css now includes dark mode variants that automatically activate based on OS preference
• Updated all CSS files (code.css, search-box.css, search-highlight.css) to use CSS variables instead of hardcoded colors
• Updated Style.lean to use CSS variables throughout

The color scheme is harmonized with lean-lang.org as requested:

• Light mode: #ffffff background, #333 text, #386ee0 links, #f9fbfd surface
• Dark mode: #1e1e1e background, #eee text, #3b94ff links, #181818 surface

Test plan

• Build the project (lake build)
• Generate sample documentation and verify light mode appearance
• Toggle OS dark mode preference and verify dark mode appearance
• Check that colors harmonize with lean-lang.org in both modes
• Test on mobile viewport sizes

Closes #641

[david-christiansen]

This sounds great, and looks good based on the diffs!

Given that you've got a checklist, I'll hold off on reviewing it until you indicate that you're ready. WRT testing the dark mode toggle, we do have Playwright tests for some features already, which seems like a natural place to put these tests.

[alok]

Thanks for the feedback! I've fixed the prettier formatting issue that was causing CI to fail.

The core dark mode via @media (prefers-color-scheme: dark) is complete and working. I also added:

• A manual theme toggle button (sun/moon icons) with localStorage persistence
• Support for data-theme="light|dark" attribute override for users who want to override their OS preference
• Theme toggle JavaScript that cycles through: system → dark → light → system

For testing the dark mode toggle, I can add Playwright tests. Should I:

1. Add tests for the theme toggle button functionality (clicking cycles themes, localStorage persistence)?
2. Add visual regression tests comparing light vs dark mode appearance?
3. Both?

[david-christiansen]

Sorry for the delay in replying. Winter holidays are now over!

I think that Playwright tests for the toggle button are important, because local storage won't be "automatically" tested in any reasonable way by most daily use of the sites, and issues would affect first-time readers disproportionately. I think the risk of regressions on the visual aspects is relatively small, though. So number 1 :-)

Thanks again, this is really a wonderful improvement!

[david-christiansen]

A few specific comments. Aside from these, this is great to read! I think the truly critical one is the missing JS.

Search Box Contrast

Here, I have a hard time seeing the border of the search box on my screen:

Can the dark-mode box be made more distinct?

Toggle Script 404

I get a 404 for localhost:8800/theme-toggle.js . Is this not placed where it should be in the generated code?

Tags Very Bright

The "structure" tag in this rendering has a light background, and seems very bright compared to the rest of the page. What's your thought process behind this decision?

[david-christiansen]

A comment here explaining the "surface" terminology would be helpful.

[david-christiansen]

I've noticed that Verso outputs that aren't designed for color switching are caught by this. How can we make it opt-in for outputs/backends that want to support system color theme specification? Maybe they should need to add data-verso-dark-mode to something?