Skip to content

Website theme selector: System theme mode not selectable via UI #895

Description

@tbouffard

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:

  1. Open the website (with a browser that supports prefers-color-scheme).
  2. Click on the light/dark mode icons.
  3. The icon toggles between "light" and "dark", but never shows or selects "system".
  4. 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

  • maxGraph version 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.

Metadata

Metadata

Assignees

Labels

documentationImprovements or additions to documentation

Type

Fields

No fields configured for Bug.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions