Fix dark theme on initial page load (#13077)

This commit is contained in:
Micha Reiser 2024-08-23 14:53:43 +02:00 committed by GitHub
parent 1f2cb09853
commit 2d5fe9a6d3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 10 deletions

View File

@ -105,8 +105,6 @@ async function startPlayground(): Promise<{
await initRuff();
const monaco = await loader.init();
console.log(monaco);
setupMonaco(monaco);
const response = await restore();

View File

@ -6,16 +6,14 @@ import { useState } from "react";
export type Theme = "dark" | "light";
export function useTheme(): [Theme, (theme: Theme) => void] {
const [localTheme, setLocalTheme] = useState<Theme>(() =>
detectInitialTheme(),
);
const [localTheme, setLocalTheme] = useState<Theme>(() => {
const theme = detectInitialTheme();
toggleTheme(theme);
return theme;
});
const setTheme = (mode: Theme) => {
if (mode === "dark") {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
toggleTheme(mode);
localStorage.setItem("theme", mode);
setLocalTheme(mode);
};
@ -35,3 +33,11 @@ function detectInitialTheme(): Theme {
return "light";
}
}
function toggleTheme(theme: Theme) {
if (theme === "dark") {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
}