Add logic for high contrast theme + refactor to hook

Signed-off-by: Timo K <toger5@hotmail.de>

src/App.tsx

@@ -35,16 +35,16 @@ import { CrashView, LoadingView } from "./FullScreenView";
 import { DisconnectedBanner } from "./DisconnectedBanner";
 import { Initializer } from "./initializer";
 import { MediaDevicesProvider } from "./livekit/MediaDevicesContext";
-import { useUrlParams } from "./UrlParams";
 import { widget } from "./widget";
+import { useTheme } from "./useTheme";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
-interface BackgroundProviderProps {
+interface SimpleProviderProps {
   children: JSX.Element;
 }
 
-const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
+const BackgroundProvider: FC<SimpleProviderProps> = ({ children }) => {
   const { pathname } = useLocation();
 
   useEffect(() => {
@@ -59,29 +59,8 @@ const BackgroundProvider: FC<BackgroundProviderProps> = ({ children }) => {
 
   return <>{children}</>;
 };
-
+const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
-interface ThemeProviderProps {
+  useTheme();
-  children: JSX.Element;
-}
-
-const ThemeProvider: FC<ThemeProviderProps> = ({ children }) => {
-  const { theme } = useUrlParams();
-  const [previousTheme, setCurrentTheme] = useState<string | null>(
-    document.body.classList.item(0),
-  );
-  useLayoutEffect(() => {
-    // Don't update the current theme if the url does not contain a theme prop.
-    if (!theme) return;
-    const themeString = "cpd-theme-" + (theme ?? "dark");
-    if (themeString !== previousTheme) {
-      if (previousTheme) {
-        document.body.classList.remove(previousTheme);
-      }
-      document.body.classList.add(themeString);
-      setCurrentTheme(themeString);
-    }
-  }, [previousTheme, theme]);
-
   return <>{children}</>;
 };
 
@@ -91,7 +70,6 @@ interface AppProps {
 
 export const App: FC<AppProps> = ({ history }) => {
   const [loaded, setLoaded] = useState(false);
-
   useEffect(() => {
     Initializer.init()?.then(() => {
       setLoaded(true);

src/useTheme.ts

@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { useLayoutEffect, useState } from "react";
+
+import { useUrlParams } from "./UrlParams";
+
+export const useTheme = (): void => {
+  const { theme: themeName } = useUrlParams();
+  const [previousTheme, setPreviousTheme] = useState<string | null>(
+    document.body.classList.item(0),
+  );
+  useLayoutEffect(() => {
+    // Don't update the current theme if the url does not contain a theme prop.
+    if (!themeName) return;
+    const theme = themeName.includes("light") ? "light" : "dark";
+    const themeHighContrast = themeName.includes("high-contrast") ? "-hc" : "";
+    const themeString = "cpd-theme-" + theme + themeHighContrast;
+    if (themeString !== previousTheme) {
+      document.body.classList.remove(
+        "cpd-theme-light",
+        "cpd-theme-dark",
+        "cpd-theme-light-hc",
+        "cpd-theme-dark-hc",
+      );
+      document.body.classList.add(themeString);
+      setPreviousTheme(themeString);
+    }
+  }, [previousTheme, themeName]);
+};