Support themes

[andreaskienle]

Implements openmcp-project/backlog#127

When integrated into Hyperspace Portal, we automatically adopt its theme:

2025-07-23_16-02-06.mp4

When running stand-alone, we detect the system (OS) settings to toggle between our default dark and light theme. Users can also specify a theme using the ⁠sap-theme parameter, which takes precedence over system settings:

2025-07-23_16-05-40.mp4

[Copilot]

Pull Request Overview

This PR implements theme support for the application by enhancing the theme management system. It replaces the simple dark/light mode switcher with a more comprehensive theme manager that can handle themes specified via URL parameters while maintaining fallback to system preferences.

• Replaced the basic DarkModeSystemSwitcher with a new ThemeManager component that supports URL-based theme selection
• Improved the authentication flow to preserve theme parameters during redirects
• Refactored dark mode detection using React's useSyncExternalStore for better reactivity

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/ThemeManager/ThemeManager.tsx	New theme manager component with URL parameter support and fallback logic
src/components/ThemeManager/ThemeManager.spec.ts	Unit tests for the theme resolution logic
src/hooks/useIsDarkModePreferred.ts	New hook using useSyncExternalStore for reactive dark mode detection
src/main.tsx	Updated to use the new ThemeManager component
src/spaces/onboarding/auth/AuthContextOnboarding.tsx	Enhanced login redirect to preserve query parameters and hash fragments
src/components/Yaml/YamlViewer.tsx	Updated to use the new dark mode detection hook
src/lib/useThemeMode.ts	Removed old theme mode utility
src/components/Core/DarkModeSystemSwitcher.tsx	Removed old dark mode switcher component

[enrico-kaack-comp]

When navigating into an mcp (in standalone mode with url parameter, so i guess also in the hyperspace), the url parameter is removed from the url on the auth mcp auth callback and therefore the theme is switched back again

[andreaskienle]

When navigating into an mcp (in standalone mode with url parameter, so i guess also in the hyperspace), the url parameter is removed from the url on the auth mcp auth callback and therefore the theme is switched back again

Good catch! I had only checked the first redirect during sign-in and overlooked the redirect when logging into an MCP.

There's a third redirect (after the token expires). I've also added a proper redirect to the previous page, preserving the theme in this case (previously the user was taken to the login screen).