From f613b17824b957d0c4503bc22b2f913e040d605d Mon Sep 17 00:00:00 2001 From: Timo K Date: Wed, 21 Feb 2024 21:41:40 +0100 Subject: [PATCH] Add theme URL param and adjust cpd theme based on it. Signed-off-by: Timo K --- src/App.tsx | 90 ++++++++++++++++++++++++++++--------------- src/Header.module.css | 1 + src/UrlParams.ts | 6 +++ src/icons/Logo.svg | 22 +++++------ src/index.css | 7 ++-- 5 files changed, 80 insertions(+), 46 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f3482252..39a01879 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,6 +35,7 @@ import { CrashView, LoadingView } from "./FullScreenView"; import { DisconnectedBanner } from "./DisconnectedBanner"; import { Initializer } from "./initializer"; import { MediaDevicesProvider } from "./livekit/MediaDevicesContext"; +import { useUrlParams } from "./UrlParams"; const SentryRoute = Sentry.withSentryRouting(Route); @@ -58,6 +59,31 @@ const BackgroundProvider: FC = ({ children }) => { return <>{children}; }; +interface ThemeProviderProps { + children: JSX.Element; +} + +const ThemeProvider: FC = ({ children }) => { + const { theme } = useUrlParams(); + const [previousTheme, setCurrentTheme] = useState( + document.body.classList.item(0), + ); + useEffect(() => { + // 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}; +}; + interface AppProps { history: History; } @@ -78,37 +104,39 @@ export const App: FC = ({ history }) => { // @ts-ignore - - {loaded ? ( - - - - - - - - - - - - - - - - - - - - - - - - - - ) : ( - - )} - + + + {loaded ? ( + + + + + + + + + + + + + + + + + + + + + + + + + + ) : ( + + )} + + ); diff --git a/src/Header.module.css b/src/Header.module.css index bb66034b..1c9a7225 100644 --- a/src/Header.module.css +++ b/src/Header.module.css @@ -33,6 +33,7 @@ limitations under the License. } .headerLogo { + color: var(--cpd-color-text-primary); display: none; align-items: center; text-decoration: none; diff --git a/src/UrlParams.ts b/src/UrlParams.ts index da2a8aae..170c9906 100644 --- a/src/UrlParams.ts +++ b/src/UrlParams.ts @@ -130,6 +130,11 @@ export interface UrlParams { * This is useful for video rooms. */ returnToLobby: boolean; + /** + * The theme to use for element call. + * can be "light", "dark", "light-hc" or "dark-hc". + */ + theme: string | null; } // This is here as a stopgap, but what would be far nicer is a function that @@ -229,6 +234,7 @@ export const getUrlParams = ( perParticipantE2EE: parser.getFlagParam("perParticipantE2EE"), skipLobby: parser.getFlagParam("skipLobby"), returnToLobby: parser.getFlagParam("returnToLobby"), + theme: parser.getParam("theme"), }; }; diff --git a/src/icons/Logo.svg b/src/icons/Logo.svg index 4d64175f..8ee78ca7 100644 --- a/src/icons/Logo.svg +++ b/src/icons/Logo.svg @@ -2,17 +2,17 @@ Element Call (Beta) - - - - - - - - - - - + + + + + + + + + + + diff --git a/src/index.css b/src/index.css index fc05247c..90794ddc 100644 --- a/src/index.css +++ b/src/index.css @@ -56,10 +56,6 @@ limitations under the License. --cpd-color-border-accent: var(--cpd-color-green-1100); --stopgap-color-on-solid-accent: var(--cpd-color-text-primary); --stopgap-background-85: rgba(16, 19, 23, 0.85); - - background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh)); - background-repeat: no-repeat; - background-position: center; } @font-face { @@ -152,6 +148,9 @@ limitations under the License. body { background-color: var(--cpd-color-bg-canvas-default); + background-size: calc(max(1440px, 100vw)) calc(max(800px, 100vh)); + background-repeat: no-repeat; + background-position: center; color: var(--cpd-color-text-primary); color-scheme: dark; margin: 0;