From 38b41f0adbdfd25b72510375168cecd2d6f503b9 Mon Sep 17 00:00:00 2001
From: Arthur Denner <arthurdenner7@gmail.com>
Date: Tue, 8 Feb 2022 20:19:33 +0100
Subject: [PATCH] fix: handle prefers-color-scheme correctly (#1740)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 lib/hooks/useTheme.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/lib/hooks/useTheme.tsx b/lib/hooks/useTheme.tsx
index 12956453..ec56b322 100644
--- a/lib/hooks/useTheme.tsx
+++ b/lib/hooks/useTheme.tsx
@@ -1,15 +1,12 @@
-import { useEffect, useState } from "react";
+import { useLayoutEffect, useState } from "react";
 
 import { Maybe } from "@trpc/server";
 
 // makes sure the ui doesn't flash
 export default function useTheme(theme?: Maybe<string>) {
   const [isReady, setIsReady] = useState(false);
-  useEffect(() => {
-    setIsReady(true);
-    if (!theme) {
-      return;
-    }
+
+  useLayoutEffect(() => {
     if (!theme && window.matchMedia("(prefers-color-scheme: dark)").matches) {
       document.documentElement.classList.add("dark");
     } else if (!theme) {
@@ -17,7 +14,9 @@ export default function useTheme(theme?: Maybe<string>) {
     } else {
       document.documentElement.classList.add(theme);
     }
-  }, []);
+
+    setIsReady(true);
+  }, [theme]);
 
   return {
     isReady,