Refactor

Author: andreaskienle

src/components/ThemeManager.tsx

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
+import { useTheme } from '../hooks/useTheme.ts';
+
+export function ThemeManager() {
+  const { theme } = useTheme();
+
+  useEffect(() => {
+    void setTheme(theme);
+  }, [theme]);
+
+  return null;
+}

src/components/ThemeManager/ThemeManager.spec.ts

@@ -6,12 +6,12 @@ import { Button, FlexBox } from '@ui5/webcomponents-react';
 import styles from './YamlViewer.module.css';
 import { useToast } from '../../context/ToastContext.tsx';
 import { useTranslation } from 'react-i18next';
-import { useIsDarkModePreferred } from '../../hooks/useIsDarkModePreferred.ts';
+import { useTheme } from '../../hooks/useTheme.ts';
 type YamlViewerProps = { yamlString: string; filename: string };
 const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
   const toast = useToast();
   const { t } = useTranslation();
-  const isDarkModePreferred = useIsDarkModePreferred();
+  const { isDarkTheme } = useTheme();
   const copyToClipboard = () => {
     navigator.clipboard.writeText(yamlString);
     toast.show(t('yaml.copiedToClipboard'));
@@ -40,7 +40,7 @@ const YamlViewer: FC<YamlViewerProps> = ({ yamlString, filename }) => {
       </FlexBox>
       <SyntaxHighlighter
         language="yaml"
-        style={isDarkModePreferred ? materialDark : materialLight}
+        style={isDarkTheme ? materialDark : materialLight}
         showLineNumbers
         lineNumberStyle={{
           paddingRight: '20px',

src/components/ThemeManager/ThemeManager.tsx

@@ -0,0 +1,38 @@
+import { useSyncExternalStore } from 'react';
+import { Theme } from '@ui5/webcomponents-react';
+
+const DEFAULT_THEME_LIGHT = Theme.sap_horizon;
+const DEFAULT_THEME_DARK = Theme.sap_horizon_dark;
+const DARK_SAP_THEMES = new Set<string>([
+  Theme.sap_fiori_3_dark,
+  Theme.sap_fiori_3_hcb,
+  Theme.sap_horizon_dark,
+  Theme.sap_horizon_hcb,
+]);
+
+function useSystemDarkModePreference() {
+  return useSyncExternalStore(
+    (callback) => {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      mediaQuery.addEventListener('change', callback);
+      return () => mediaQuery.removeEventListener('change', callback);
+    },
+    () => window.matchMedia('(prefers-color-scheme: dark)').matches,
+  );
+}
+
+export function useTheme() {
+  const systemPrefersDark = useSystemDarkModePreference();
+  const themeFromUrl = new URL(window.location.href).searchParams.get('sap-theme');
+
+  // Theme from URL takes precedence over system settings
+  const theme = themeFromUrl || (systemPrefersDark ? DEFAULT_THEME_DARK : DEFAULT_THEME_LIGHT);
+
+  // For well-defined SAP themes, return if they are light or dark – unknown themes will fall back to light
+  const isDarkTheme = DARK_SAP_THEMES.has(theme);
+
+  return {
+    theme,
+    isDarkTheme,
+  };
+}

src/components/Yaml/YamlViewer.tsx

@@ -7,7 +7,7 @@ import { ToastProvider } from './context/ToastContext.tsx';
 import { CopyButtonProvider } from './context/CopyButtonContext.tsx';
 import { FrontendConfigProvider } from './context/FrontendConfigContext.tsx';
 import '@ui5/webcomponents-react/dist/Assets'; //used for loading themes
-import { ThemeManager } from './components/ThemeManager/ThemeManager.tsx';
+import { ThemeManager } from './components/ThemeManager.tsx';
 import '.././i18n.ts';
 import './utils/i18n/timeAgo';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';