Fix dark mode support

tlo9 · Apr 3, 2024 · 4d3fc24 · 4d3fc24
1 parent 5ad952a
commit 4d3fc24
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/frontend/src/components/HtmlAnnotator.tsx b/frontend/src/components/HtmlAnnotator.tsx
@@ -121,8 +121,9 @@ export default function HTMLAnnotator({
 	imageUploadRef
 }: HTMLAnnotatorProps) {
 	// code spaces and their fancy proxy as well as our hosted service use github pages
-	let iframeSrc =
-		import.meta.env.MODE === 'hosted' || document.location.hostname.endsWith('github.dev')
+	const iframeSrc =
+		import.meta.env.MODE === 'hosted' ||
+		document.location.hostname.endsWith('github.dev')
 			? 'https://wandb.github.io'
 			: 'http://127.0.0.1:7878'
 	const iframeRef = useRef<HTMLIFrameElement | null>(null)
@@ -144,6 +145,14 @@ export default function HTMLAnnotator({
 		setDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches)
 	}, [setDarkMode])
 
+	useEffect(() => {
+		if (darkMode) {
+			document.documentElement.classList.add('dark')
+		} else {
+			document.documentElement.classList.remove('dark')
+		}
+	}, [darkMode])
+
 	// iframe content
 	useEffect(() => {
 		if (!bufferedHTML) {