From ee4834643019b2b5dcf275ec624a934a95f99179 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20Schr=C3=B6ter?= <dev@felschr.com>
Date: Wed, 4 Jan 2023 18:57:08 +0100
Subject: [PATCH] fix: fix dark mode flickering

---
 src/components/organisms/Layout.tsx | 34 +++++++++++++----------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/components/organisms/Layout.tsx b/src/components/organisms/Layout.tsx
index e6e0050..f0c6c06 100644
--- a/src/components/organisms/Layout.tsx
+++ b/src/components/organisms/Layout.tsx
@@ -1,6 +1,6 @@
 import * as React from "react"
 import { ReactNode, useMemo } from "react"
-import { AppBar, Box, Button, Container, createTheme, CssBaseline, Link, ThemeProvider, Toolbar, Typography, useMediaQuery, useTheme } from "@mui/material"
+import { AppBar, Box, Button, Container, experimental_extendTheme as extendTheme, CssBaseline, Link, Toolbar, Typography, useTheme, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript } from "@mui/material"
 import CodeIcon from "@mui/icons-material/Code"
 import { Link as GatsbyLink } from "gatsby"
 import { Footer } from "../atoms/Footer"
@@ -74,27 +74,23 @@ const Layout = ({ pageTitle, preTitle, children }: LayoutProps) => {
   )
 }
 
+const theme = extendTheme({
+  colorSchemes: {
+    light: {},
+    dark: {},
+  },
+  typography: {
+    h1: { fontSize: 48, paddingBottom: 20 },
+  }
+})
+
 const AppLayout = (props: LayoutProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode: prefersDarkMode ? "dark" : "light",
-        },
-        typography: {
-          h1: { fontSize: 48, paddingBottom: 20 },
-        }
-      }),
-    [prefersDarkMode],
-  );
-
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
+    <CssVarsProvider theme={theme} defaultMode="system">
+      {getInitColorSchemeScript({ defaultMode: "system" })}
+      <CssBaseline enableColorScheme />
       <Layout {...props} />
-    </ThemeProvider>
+    </CssVarsProvider>
   )
 }