refactor: Remove ThemeToggle component and related theme management l…

…ogic from Layout and index pages
Immo-Be · Sep 20, 2024 · 756c1fb · 756c1fb
1 parent 833476f
commit 756c1fb
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 67 deletions.
diff --git a/src/components/toggle-switch.tsx b/src/components/toggle-switch.tsx
diff --git a/src/hooks/use-is-scrolled.ts b/src/hooks/use-is-scrolled.ts
@@ -9,6 +9,7 @@ export function useIsScrolled(y = 0): boolean {
     };
 
     window.addEventListener('scroll', handleScroll);
+    handleScroll();
     return () => window.removeEventListener('scroll', handleScroll);
   }, [y]);
 

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -10,33 +10,6 @@ import '../styles/utilities.css';
 import Navbar from '../components/navbar';
 ---
 
-<script>
-  import {THEME} from '../types/app';
-  const theme = (): THEME => {
-    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-      return localStorage.getItem('theme') as THEME;
-    }
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return THEME.DARK;
-    }
-    return THEME.LIGHT;
-  };
-
-  const setTheme = () => {
-    if (theme() === THEME.LIGHT) {
-      document.documentElement.classList.remove(THEME.DARK);
-    } else {
-      document.documentElement.classList.add(THEME.DARK);
-    }
-    window.localStorage.setItem('theme', theme());
-  };
-
-  setTheme();
-  document.addEventListener('astro:after-swap', () => {
-    setTheme();
-  });
-</script>
-
 <html lang="de">
   <head>
     <title>{title}</title>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,7 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import VideoWrapper from '../components/video-wrapper.tsx';
-import ThemeToggle from '../components/toggle-switch.tsx';
 ---
 
 <script>
@@ -102,6 +101,5 @@ import ThemeToggle from '../components/toggle-switch.tsx';
     quas nisi iste quae! Id, impedit quod assumenda tempore cupiditate rerum
     molestias cumque esse beatae debitis nisi facere placeat, asperiores ab
     facilis atque nihil dignissimos veniam a!
-    <ThemeToggle client:only="preact" />
   </Fragment>
 </Layout>
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
@@ -48,9 +48,11 @@ body,
     --color-text: 33 33 33;
   }
 
-  :root[class~='dark'] {
-    --color-primary: 51 51 51;
-    --color-text: 241 234 229;
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --color-primary: 33 33 33;
+      --color-text: 241 234 229;
+    }
   }
 
   h1,