Add dark mode support for built-in themes

[FazeelUsmani]

This commit adds automatic dark mode support to Sphinx's built-in themes (basic, classic, haiku, nature, and sphinxdoc) using CSS prefers-color-scheme media queries. The dark mode activates automatically based on the user's system/browser theme preference.

Additionally, an optional JavaScript toggle (theme_toggle.js) is provided in the basic theme to allow users to manually switch between light and dark modes, with the preference saved in localStorage.

Features:

• Dark mode CSS for basic, classic, haiku, nature, and sphinxdoc themes
• Automatic activation via prefers-color-scheme media query
• Optional manual toggle with theme_toggle.js
• Improved contrast and readability in dark mode
• Support for both automatic and manual theme switching

Testing:

• Manually tested with system dark mode enabled/disabled
• Theme switching is instantaneous
• All UI elements properly styled in both modes
• Text remains readable with proper contrast ratios
• Manual toggle persists preference across page loads

References

• Fixes Support dark mode for builtin themes #13742 (good first issue: Add dark mode support to built-in themes)

[mgeier]

Thanks for this PR!

I think it would be great for Sphinx to have native support for a dark mode, but we should make sure that doesn't badly interact with common existing third-party themes that already have a dark mode. Did you happen to try any of them in combination with your suggested changes? Do they still work?
If not, we should at least give the theme authors a heads-up so they can join the discussion.

In this PR, you are combining two separate things: dark mode and mode switcher. Is it necessary to have both in the same PR? There might be people (like e.g. me) who think that dark mode is great, but a mode switcher might not be that great.

Maybe related to the previous point, there seems to be quite a lot of duplication. Is there a way to somehow avoid that?

The data-theme stuff seems to be only in the basic theme ... does that mean it doesn't work in the other themes or is it not needed there? (I must confess that I didn't try it)

Sphinx's own theme sphinx13 doesn't seem to be part of this PR, is this intentional?

I'm not a CSS expert, but I've often seen CSS variables used for color theme selection, something like var(--background-color) or var(--link-color) or whatever, and the bright/dark theme then assigns different color values to those CSS variables. Would that make sense here, or is it better not to use CSS variables?