diff --git a/.vscode/extensions.json b/.vscode/extensions.json index d7192cb888..447e1ed7db 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -7,6 +7,6 @@ "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind "ban.spellright", // Spell check for docs "stripe.vscode-stripe", // stripe VSCode extension - "Prisma.prisma" // syntax|format|completion for prisma + "Prisma.prisma" // syntax|format|completion for prisma ] } diff --git a/apps/web/lib/hooks/useTheme.tsx b/apps/web/lib/hooks/useTheme.tsx index 2b9ff7e59f..2fab3f02b0 100644 --- a/apps/web/lib/hooks/useTheme.tsx +++ b/apps/web/lib/hooks/useTheme.tsx @@ -3,28 +3,42 @@ import { useEffect, useState } from "react"; import { Maybe } from "@trpc/server"; +// This method is stringified and executed only on client. So, +// - Pass all the params explicitly to this method. Don't use closure +function applyThemeAndAddListener(theme: string) { + const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)"); + const applyTheme = function (theme: string, darkMatch: boolean) { + if (!theme) { + if (darkMatch) { + document.documentElement.classList.add("dark"); + } else { + document.documentElement.classList.remove("dark"); + } + } else { + document.documentElement.classList.add(theme); + } + }; + mediaQueryList.onchange = function (e) { + applyTheme(theme, e.matches); + }; + applyTheme(theme, mediaQueryList.matches); +} + // makes sure the ui doesn't flash export default function useTheme(theme?: Maybe) { const [isReady, setIsReady] = useState(false); + useEffect(() => { + // TODO: isReady doesn't seem required now. This is also impacting PSI Score for pages which are using isReady. setIsReady(true); }, []); + function Theme() { - const themeString = theme ? `"${theme}"` : null; + const code = applyThemeAndAddListener.toString(); + const themeStr = theme ? `"${theme}"` : null; return ( - + ); }