feat(theme): configurable dark mode with system preference support

[remintroy]

This PR implements a robust and configurable dark mode system with three options: light, dark, and system (auto-detect).

Key Changes

1. New theme Configuration:

   • Added theme: { defaultMode: '...' } to Swagger UI config.
   • 'system' (Default): Automatically respects the user's OS/browser preference.
   • 'dark': Forces dark mode.
   • 'light': Forces light mode.

2. Core Plugin Implementation:

   • Logic moved to a new core plugin (src/core/plugins/dark-mode) for better state management.
   • src/standalone/plugins/top-bar/components/TopBar.jsx - Pass dark mode props
   • docker/configurator/variables.js - Helper for Docker env vars
   • test/unit/standalone/plugins/top-bar/DarkModeToggle.jsx - Updated test
   • Ensures dark mode works uniformly across all layouts (Base, Standalone, etc.).

3. Docker Support:

   • Added THEME_DEFAULT_MODE environment variable support.
   • Allows configuring the default theme mode directly in Docker containers (e.g., -e THEME_DEFAULT_MODE=dark).

4. CSS Isolation:

   • Dark mode styles are properly scoped to .swagger-ui to prevent style leakage into host applications during embedded usage.

5. Backward Compatibility:

   • Existing manual methods (toggling dark-mode class) still work.
   • No breaking changes for existing users.

Usage Example

SwaggerUI({
  url: 'https://petstore.swagger.io/v2/swagger.json',
  theme: {
    defaultMode: 'dark' // or 'light' or 'system'
  }
});

Documentation

• Added comprehensive guide: docs/usage/dark-mode.md
• Updated configuration docs: docs/usage/configuration.md

Closes #10663

Description

Implements configurable dark mode with light, dark, and system (auto-detect) options, including Docker support via THEME_DEFAULT_MODE env var.

Motivation and Context

As a user, I wanted native support for system-preferred dark mode and easier configuration options to improve the overall viewing experience.
Fixes #10663

How Has This Been Tested?

Manually verified theme.defaultMode in browser (Chrome/Firefox), tested Docker environment variable injection, and verified CSS scoping prevents leakage.

Screenshots (if appropriate):

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.

[AllanOcelot]

Great stuff, fully agree that with the logic move over to a plugin.

[paul-uz]

Can this get merged? the latest swagger ui is useless to me as dark mode cannot be disabled if my system is set to dark mode and I'm trying to render a light mode UI.

[Rincho-M]

Very happy with this feature! Hope it will be out soon