From 2b9bf5a3e60e795993f6ed8751b69a5e1ff2aae9 Mon Sep 17 00:00:00 2001 From: Cedric van Putten Date: Fri, 5 Apr 2024 15:25:19 +0200 Subject: [PATCH] refactor: simplify theme class workaround (#29) --- webui/src/app/+html.tsx | 2 +- webui/src/providers/theme.tsx | 15 +++++---------- 2 files changed, 6 insertions(+), 11 deletions(-) diff --git a/webui/src/app/+html.tsx b/webui/src/app/+html.tsx index a9bcff0..21cb6e9 100644 --- a/webui/src/app/+html.tsx +++ b/webui/src/app/+html.tsx @@ -10,7 +10,7 @@ export default function Root({ children }: { children: React.ReactNode }) { - {children} + {children} ); } diff --git a/webui/src/providers/theme.tsx b/webui/src/providers/theme.tsx index 20570af..4d5775c 100644 --- a/webui/src/providers/theme.tsx +++ b/webui/src/providers/theme.tsx @@ -2,20 +2,15 @@ import { useColorScheme } from 'nativewind'; import { useEffect, type PropsWithChildren } from 'react'; export function ThemeProvider({ children }: PropsWithChildren) { - useWorkaroundForThemeClass(); - - return children; -} - -function useWorkaroundForThemeClass() { const { colorScheme } = useColorScheme(); useEffect(() => { - if (document.body) { + // Keep the prefered color scheme synced with the `body` class name + if (document.body && colorScheme) { document.body.classList.remove('light-theme', 'dark-theme'); - if (colorScheme) { - document.body.className = `${colorScheme}-theme`; - } + document.body.className = `${colorScheme}-theme`; } }, [colorScheme]); + + return children; }