Refactor code for enabling style sheets

Seneca-CDOT · Jan 30, 2022 · 8234a1b · 8234a1b
1 parent 446413a
commit 8234a1b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
diff --git 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
@@ -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
@@ -42,8 +42,8 @@ class MyDocument extends Document {
           <meta name="twitter:image" content={image} />
           <meta name="twitter:image:alt" content={imageAlt} />
 
-          <link rel="stylesheet" href="/styles/github.css" id="light-stylesheet" />
-          <link rel="stylesheet" href="/styles/github-dark.css" id="dark-stylesheet" />
+          <link rel="stylesheet" href="/styles/github.min.css" id="light-stylesheet" />
+          <link rel="stylesheet" href="/styles/github-dark.min.css" id="dark-stylesheet" />
         </Head>
         <body>
           <Main />