diff --git a/src/web/src/hooks/use-preferred-theme.ts b/src/web/src/hooks/use-preferred-theme.ts
index 2f2065e472..57ea545ce9 100644
--- a/src/web/src/hooks/use-preferred-theme.ts
+++ b/src/web/src/hooks/use-preferred-theme.ts
@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
import { useLocalStorage, useMedia } from 'react-use';
/**
@@ -10,6 +11,19 @@ export default function usePreferredTheme() {
'preference:theme',
isDarkThemePreferred ? 'dark' : 'light'
);
+ useEffect(() => {
+ const lightStyleSheet = (document.querySelector('#light-stylesheet') as HTMLStyleElement).sheet;
+
+ if (lightStyleSheet !== null) {
+ lightStyleSheet.disabled = preferredTheme === 'dark';
+ }
+
+ const darkStyleSheet = (document.querySelector('#dark-stylesheet') as HTMLStyleElement).sheet;
+
+ if (darkStyleSheet !== null) {
+ darkStyleSheet.disabled = preferredTheme === 'light';
+ }
+ }, [preferredTheme]);
return [preferredTheme, setPreferredTheme] as const;
}
diff --git a/src/web/src/pages/_app.tsx b/src/web/src/pages/_app.tsx
index 974253aae4..71965b064c 100644
--- a/src/web/src/pages/_app.tsx
+++ b/src/web/src/pages/_app.tsx
@@ -27,27 +27,11 @@ const App = ({ Component, pageProps }: AppProps) => {
if (jssStyles) {
jssStyles.parentElement?.removeChild(jssStyles);
}
-
- // Enable the stylesheet for the syntax highlighting depending on the theme
- if (preferredTheme === 'dark') {
- document.querySelector('#light-stylesheet')?.setAttribute('disabled', 'disabled');
- } else {
- document.querySelector('#dark-stylesheet')?.setAttribute('disabled', 'disabled');
- }
});
// Switch the active theme, and also store it for next load
- // We also disable the current stylesheet and enable the other one.
const toggleTheme = () => {
- if (preferredTheme === 'dark') {
- document.querySelector('#light-stylesheet')?.removeAttribute('disabled');
- document.querySelector('#dark-stylesheet')?.setAttribute('disabled', 'disabled');
- setPreferredTheme('light');
- } else {
- document.querySelector('#dark-stylesheet')?.removeAttribute('disabled');
- document.querySelector('#light-stylesheet')?.setAttribute('disabled', 'disabled');
- setPreferredTheme('dark');
- }
+ setPreferredTheme(preferredTheme === 'dark' ? 'light' : 'dark');
};
return (
diff --git a/src/web/src/pages/_document.tsx b/src/web/src/pages/_document.tsx
index e4a7e63f6f..15f1d3342c 100644
--- a/src/web/src/pages/_document.tsx
+++ b/src/web/src/pages/_document.tsx
@@ -42,8 +42,8 @@ class MyDocument extends Document {
-
-
+
+