Fix dark mode flicker docs

packages/paste-website/src/components/site-wrapper/site-header/SiteHeaderSearch.tsx

@@ -11,9 +11,14 @@ import { SiteSearch } from "../../site-search";
 const SiteHeaderSearch: React.FC = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const { breakpointIndex } = useWindowSize();
-  const isMacOS = navigator.platform.toUpperCase().includes("MAC");
+  // navigator is not available in SSR, so we need to check if it exists before using it
+  const [isMacOS, setIsMacOS] = React.useState(false);
   const platformTriggerKey = isMacOS ? "Meta" : "Control";
 
+  React.useEffect(() => {
+    setIsMacOS(typeof window !== "undefined" && navigator && navigator?.platform.toUpperCase().includes("MAC"));
+  }, []);
+
   const onOpen = (): void => {
     setIsOpen(true);
   };

packages/paste-website/src/hooks/useDarkMode.tsx

@@ -5,6 +5,16 @@
 
 export type UseDarkModeReturn = [ValidThemeName, () => void, boolean];
 
+const setCookie = (name: string, value: any, days: number): void => {
+  let expires = "";
+  if (days) {
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = `; expires=${date.toUTCString()}`;
+  }
+  document.cookie = `${name}=${value || ""}${expires}; path=/`;
+};
+
 const ValidThemes = {
   DEFAULT: "twilio",
   DARK: "twilio-dark",
@@ -13,16 +23,17 @@
 type ValidThemeName = ValueOf<typeof ValidThemes>;
 
 const isValidTheme = (themeName: ValidThemeName): boolean => {
-  return Object.values(ValidThemes).includes(themeName);
+  return themeName === ValidThemes.DEFAULT || themeName === ValidThemes.DARK;
 };
 
-export const useDarkMode = (): UseDarkModeReturn => {
-  const [theme, setTheme] = React.useState<ValidThemeName>(ValidThemes.DEFAULT);
+export const useDarkMode = (defaultValue: ValidThemeName = ValidThemes.DEFAULT): UseDarkModeReturn => {
+  const [theme, setTheme] = React.useState<ValidThemeName>(defaultValue);
   const [componentMounted, setComponentMounted] = React.useState(false);
 
   const setMode = (mode: ValidThemeName): void => {
     SimpleStorage.set("theme", mode);
     setTheme(mode);
+    setCookie("paste-docs-theme", mode, 365);
   };
 
   const toggleTheme = (): void => {

packages/paste-website/src/pages/_app.tsx

@@ -1,11 +1,12 @@
 import { datadogRum } from "@datadog/browser-rum";
 import { Theme } from "@twilio-paste/theme";
-import type { AppProps } from "next/app";
+import type { AppContext, AppInitialProps, AppProps } from "next/app";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import Script from "next/script";
 import * as React from "react";
 
+import NextApp from "next/app";
 import packageJSON from "../../../paste-core/core-bundle/package.json";
 import { CookieConsent } from "../components/CookieConsent";
 import { DATADOG_APPLICATION_ID, DATADOG_CLIENT_TOKEN, ENVIRONMENT_CONTEXT, SITE_BREAKPOINTS } from "../constants";
@@ -18,10 +19,14 @@
 
 const isProd = ENVIRONMENT_CONTEXT === "production";
 
-const App = ({ Component, pageProps }: AppProps): React.ReactElement => {
+interface AppPageProps {
+  themeCookie: any;
+}
+
+const App = ({ Component, pageProps, themeCookie }: AppProps & AppPageProps): React.ReactElement => {
   const router = useRouter();
   const localStorageKey = "cookie-consent-accepted";
-  const [theme, toggleMode, componentMounted] = useDarkMode();
+  const [theme, toggleMode, componentMounted] = useDarkMode(themeCookie);
   const [previewTheme, setPreviewTheme] = React.useState("twilio");
   const [cookiesAccepted, setCookiesAccepted] = React.useState<null | string>();
 
@@ -116,21 +121,30 @@
         disableAnimations={inCypress()}
         cacheProviderProps={{ key: "next" }}
       >
-        {componentMounted ? (
-          <DarkModeContext.Provider value={{ theme, toggleMode, componentMounted }}>
-            <PreviewThemeContext.Provider value={{ theme: previewTheme, selectTheme: setPreviewTheme }}>
-              <Component {...pageProps} />
-              {cookiesAccepted === null && (
-                <CookieConsent onAccept={handleCookieAccept} onReject={handleCookieReject} />
-              )}
-            </PreviewThemeContext.Provider>
-          </DarkModeContext.Provider>
-        ) : (
-          <></>
-        )}
+        <DarkModeContext.Provider value={{ theme, toggleMode, componentMounted }}>
+          <PreviewThemeContext.Provider value={{ theme: previewTheme, selectTheme: setPreviewTheme }}>
+            <Component {...pageProps} />
+            {cookiesAccepted === null && <CookieConsent onAccept={handleCookieAccept} onReject={handleCookieReject} />}
+          </PreviewThemeContext.Provider>
+        </DarkModeContext.Provider>
       </Theme.Provider>
     </>
   );
 };
 
+App.getInitialProps = async (context: AppContext): Promise<AppPageProps & AppInitialProps> => {
+  const ctx = await NextApp.getInitialProps(context);
+
+  const cookies = context.ctx.req?.headers?.cookie;
+
+  if (!cookies) {
+    return { ...ctx, themeCookie: null };
+  }
+
+  const cookiestring = RegExp(`${"paste-docs-theme"}=[^;]+`).exec(cookies);
+  const decodedString = decodeURIComponent(cookiestring ? cookiestring.toString().replace(/^[^=]+./, "") : "");
+
+  return { ...ctx, themeCookie: decodedString };
+};
+
 export default App;