Merge pull request #324 from GeekyAnts/fix/colormode-flicker

fix: color mode flicker

Author: ankit-tailor

pages/_app.tsx

@@ -1,10 +1,11 @@
 import "../styles/globals.css";
 import type { AppProps } from "next/app";
+import colors from "native-base/src/theme/base/colors";
 import { ColorMode, NativeBaseProvider, StorageManager } from "native-base";
 import { AppContext } from "../src/AppContext";
 import { useEffect, useState } from "react";
 import React from "react";
-import { theme } from "../src/theme";
+import { getNativeBaseTheme, theme } from "../src/theme";
 
 type MyThemeType = typeof theme;
 declare module "native-base" {
@@ -32,13 +33,23 @@ function MyApp({ Component, pageProps }: AppProps) {
   const [activeVersion, setActiveVersion] = useState("/");
   const [activeSidebarItem, setActiveSidebarItem] = useState("");
   const [isNavbarOpen, setIsNavbarOpen] = useState(false);
+  const [colorMode, setColorMode] = useState<ColorMode>(null);
+  const [mounted, setMounted] = useState(false);
 
-  useEffect(() => {
-    document.getElementsByTagName("html")[0].setAttribute("data-theme", "dark");
+  React.useEffect(async () => {
+    const currColorMode = await colorModeManager.get();
+    document
+      .getElementsByTagName("html")[0]
+      .setAttribute("data-theme", currColorMode);
+    setColorMode(currColorMode);
+    setMounted(true);
   }, []);
 
+  const currTheme = getNativeBaseTheme(colorMode);
+
   const updateActiveVersion = (version: string) => setActiveVersion(version);
-  return (
+
+  const body = (
     <AppContext.Provider
       value={{
         activeVersion,
@@ -52,14 +63,20 @@ function MyApp({ Component, pageProps }: AppProps) {
       {/* @ts-ignore */}
       <NativeBaseProvider
         isSSR
-        theme={theme}
+        theme={currTheme}
         config={config}
         colorModeManager={colorModeManager}
       >
         <Component {...pageProps} />
       </NativeBaseProvider>
     </AppContext.Provider>
   );
+
+  if (!mounted) {
+    return <div style={{ visibility: "hidden" }}>{body}</div>;
+  }
+
+  return body;
 }
 
 export default MyApp;

src/theme/index.tsx

@@ -1,5 +1,92 @@
 import { extendTheme } from "native-base";
 import colors from "native-base/src/theme/base/colors";
+
+export const getNativeBaseTheme = (colorMode) => {
+  return extendTheme({
+    colors: {
+      backgroundLight: colors.coolGray[100],
+      backgroundDark: colors.blueGray[900],
+
+      primaryTextDark: colors.cyan[200],
+      primaryTextLight: colors.cyan[700],
+
+      borderColorDark: colors.coolGray[800],
+      borderColorLight: "#dfe3e6",
+
+      // -------------------------------------------------- TOC -------------------------------------------
+
+      tocActiveTextLightColor: colors.coolGray[900],
+      tocActiveTextDarkColor: colors.coolGray[50],
+
+      tocTextLightColor: colors.coolGray[400],
+      tocTextDarkColor: colors.coolGray[500],
+
+      tocLeftDarkBorder: colors.coolGray[700],
+      tocLeftLightBorder: colors.coolGray[300],
+
+      tocLeftDarkBorderBall: colors.coolGray[800],
+      tocLeftLightBorderBall: colors.coolGray[300],
+
+      tocLeftDarkBorderActiveBall: colors.coolGray[400],
+      tocLeftLightBorderActiveBall: colors.coolGray[600],
+
+      // -------------------------------------------------- SideBar -------------------------------------------
+
+      sidebarBackgroundLight: colors.coolGray[100],
+      sidebarBackgroundDark: colors.blueGray[900],
+      sidebarItemHeadingTextDark: colors.coolGray[50],
+      sidebarItemHeadingTextLight: colors.blueGray[900],
+      sidebarItemTextDark: colors.coolGray[200],
+      sidebarItemTextLight: "#11181c",
+
+      activeSidebarItemBackgroundLight: colors.cyan[200],
+      activeSidebarItemBackgroundDark: colors.cyan[700],
+      activeSidebarItemHoverBackgroundLight: colors.cyan[200],
+      activeSidebarItemHoverBackgroundDark: colors.cyan[600],
+
+      inactiveSidebarItemHoverBackgroundLight: colors.blueGray[200],
+      inactiveSidebarItemHoverBackgroundDark: colors.blueGray[800],
+
+      // -------------------------------------------------- Link -------------------------------------------
+
+      inactiveLinkTextColorLight: "#687076",
+      inactiveLinkTextColorDark: "#9ba1a6",
+      inactiveHoverBorderBottomLinkColorDark: "#26292b",
+      inactiveHoverBorderBottomLinkColorLight: "#eceef0",
+
+      activeLinkTextColorLight: "#11181c",
+      activeLinkTextColorDark: "#ecedee",
+      activeBorderBottomLinkColorLight: "#eceef0",
+      activeBorderBottomLinkColorDark: "#eceef0",
+      activeHoverBorderBottomLinkColorDark: "#26292b",
+      activeHoverBorderBottomLinkColorLight: "#eceef0",
+
+      // -------------------------------------------------- Page Navs -------------------------------------------
+
+      pageNavigationHeadingLight: "#687076",
+      pageNavigationHeadingDark: "#9ba1a6",
+      pageNavigationMainTitleLight: "#006adc",
+      pageNavigationMainTitleDark: "#52a9ff",
+
+      // -------------------------------------------------- Tabs -------------------------------------------
+
+      SelectedTabTextColor: "#52a9ff",
+      SelectedTabBorderColor: "#52a9ff",
+
+      // -------------------------------------------------- CodeBlock -------------------------------------------
+
+      codeBlockBackgroundColor: "#171E2E",
+
+      // -------------------------------------------------- Admonitions -------------------------------------------
+      tipBackgroundColorDark: colors.coolGray[300],
+      tipBackgroundColorLight: colors.coolGray[900],
+    },
+    config: {
+      initialColorMode: colorMode,
+    },
+  });
+};
+
 export const theme = extendTheme({
   colors: {
     backgroundLight: colors.coolGray[100],

styles/globals.css

@@ -5,7 +5,6 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
   position: relative;
-  background-color: #0f172a;
 }
 #nativebase-body-light ::-moz-selection {
   /* Code for Firefox */