Matrix/element-call-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-call.git synced 2026-04-06 07:20:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add logic for high contrast theme + refactor to hook

Browse Source 
Signed-off-by: Timo K <toger5@hotmail.de>
This commit is contained in:
Timo K
2024-02-22 11:16:38 +01:00
parent f8a3ad3760
commit 4b6b813bb0
2 changed files with 48 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/App.tsx
View File

@@ -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}</>;
};
interface ThemeProviderProps {
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]);
const ThemeProvider: FC<SimpleProviderProps> = ({ children }) => {
useTheme();
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);

43
src/useTheme.ts Normal file
View File

@@ -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]);
};