From 662d0f754fac51e6ee2985a440c8d42377681048 Mon Sep 17 00:00:00 2001 From: Athou Date: Sun, 7 Jan 2024 17:13:09 +0100 Subject: [PATCH] avoid flash of light theme when using system color scheme --- commafeed-client/src/hooks/useColorScheme.ts | 22 +++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/commafeed-client/src/hooks/useColorScheme.ts b/commafeed-client/src/hooks/useColorScheme.ts index e9abc714..cb087163 100644 --- a/commafeed-client/src/hooks/useColorScheme.ts +++ b/commafeed-client/src/hooks/useColorScheme.ts @@ -1,4 +1,20 @@ -import { useComputedColorScheme } from "@mantine/core" - // the color scheme to use to render components -export const useColorScheme = () => useComputedColorScheme("light") +import { useMantineColorScheme } from "@mantine/core" +import { useMediaQuery } from "@mantine/hooks" + +export const useColorScheme = () => { + const systemColorScheme = useMediaQuery( + "(prefers-color-scheme: dark)", + // passing undefined will use window.matchMedia(query) as default value + undefined, + { + // get initial value synchronously and not in useEffect to avoid flash of light theme + getInitialValueInEffect: false, + } + ) + ? "dark" + : "light" + + const { colorScheme } = useMantineColorScheme() + return colorScheme === "auto" ? systemColorScheme : colorScheme +}