Website theme selector: System theme mode not selectable via UI #895
Description
Describe the bug
The system theme mode is not selectable using the UI buttons (sun/moon icons). Only "light" and "dark" modes are toggled.
However, this is supposed to be supported according to the Docusaurus 3.8 release notes:
https://docusaurus.io/blog/releases/3.8#system-color-mode
It works fine on the Docusaurus website, so it doesn’t seem like a general bug in the library.
Manually setting data-theme="system" in the <html> tag (via browser dev tools) does display the "system" icon correctly, so the CSS part seems fine.
But using the icons in the UI never sets the mode to "system".
I didn’t change the theme config during the upgrade to Docusaurus 3.8. The release notes don’t mention anything specific to enable this feature.
To Reproduce
Steps to reproduce the behavior:
- Open the website (with a browser that supports prefers-color-scheme).
- Click on the light/dark mode icons.
- The icon toggles between "light" and "dark", but never shows or selects "system".
- If you inspect the HTML and manually set
data-theme="system", the system icon appears.
Expected behavior
When clicking the icon, I expect it to cycle through "light", "dark", and "system" themes.
Screenshots
Working on the Docusaurus website
docusaurus_provide_system_theme_switch.mp4
Not working on the maxGraph webiste
issue_maxgraph_theme_switch_missing_system.mp4
Environment
maxGraphversion or commit:5c2aa3b- Desktop or mobile: Desktop
- OS and version: Ubuntu 24.04
- Browser and version:
- Firefox 141.0
- Chrome (latest stable)
- Node/npm version (if applicable): n/a
- Used frameworks (if applicable): Docusaurus 3.8
Additional context
Might be a missing config key in docusaurus.config.js? But the docs suggest it should work out-of-the-box.