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.