Better to implement dark page this way

itsmichaelwest · Jun 4, 2023 · 5db9dfe · 5db9dfe · vercel · Jun 4, 2023
1 parent 1d8cd58
commit 5db9dfe
Show file tree

Hide file tree

Showing 3 changed files with 3,988 additions and 11 deletions.
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -4,16 +4,6 @@ import Header from './Header'
 
 const Layout = ({ children }) => (
     <>
-        <style jsx global>{`
-            body {
-                background-color: white;
-            }
-            @media (prefers-color-scheme: dark) {
-                body {
-                    background-color: black;
-                }
-            }
-        `}</style>
         <Head>
             <link rel="icon" href="/favicon.ico" />
             <link rel="me" href="https://mastodon.social/@michaelwest" />

diff --git a/styles/global.css b/styles/global.css
@@ -1,4 +1,16 @@
 @import url('https://use.typekit.net/wok1tda.css');
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@media (prefers-color-scheme: light) {
+    html, body {
+      background-color: #FFF;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    html, body {
+      background-color: #000;
+    }
+}