From c79b108e66bc9fb6f522ff66edbf03392e09fcf5 Mon Sep 17 00:00:00 2001
From: Yudho <149754501+yudhomax@users.noreply.github.com>
Date: Fri, 1 Nov 2024 15:26:57 +0530
Subject: [PATCH] fix(app): dark mode page flash in app router (#598)

---
 .../app/Address/Contract/VerifiedData.tsx     |  4 +-
 .../components/app/Advertise/ThemeImage.tsx   |  4 +-
 .../src/components/app/Apis/ApiActions.tsx    |  4 +-
 apps/app/src/components/app/Charts/Chart.tsx  |  4 +-
 .../src/components/app/Charts/TpsChart.tsx    |  4 +-
 .../components/app/Contact/FormContact.tsx    |  4 +-
 .../app/src/components/app/Layouts/Footer.tsx |  4 +-
 .../app/src/components/app/Layouts/Header.tsx | 17 +++++---
 .../app/src/components/app/Layouts/Layout.tsx | 42 ++++++++++++-------
 .../components/app/Layouts/LayoutActions.tsx  |  6 ++-
 .../src/components/app/Layouts/RpcMenu.tsx    |  2 +-
 .../app/NodeExplorer/Delegators.tsx           |  4 +-
 .../app/NodeExplorer/NodeListActions.tsx      |  4 +-
 .../components/app/Transactions/Overview.tsx  | 13 +++---
 apps/app/src/components/app/common/QrCode.tsx |  4 +-
 apps/app/src/components/common/Links.tsx      |  4 +-
 apps/app/src/hooks/app/useTheme.ts            | 32 ++++++++++++++
 apps/app/src/stores/theme.ts                  | 11 +++++
 18 files changed, 114 insertions(+), 53 deletions(-)
 create mode 100644 apps/app/src/hooks/app/useTheme.ts
 create mode 100644 apps/app/src/stores/theme.ts

diff --git a/apps/app/src/components/app/Address/Contract/VerifiedData.tsx b/apps/app/src/components/app/Address/Contract/VerifiedData.tsx
index 0f3f46a15..30cc67de0 100644
--- a/apps/app/src/components/app/Address/Contract/VerifiedData.tsx
+++ b/apps/app/src/components/app/Address/Contract/VerifiedData.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useTheme } from 'next-themes';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { oneLight } from 'react-syntax-highlighter/dist/cjs/styles/prism';
@@ -13,6 +12,7 @@ import { VerifierData } from '@/utils/types';
 import ErrorMessage from '@/components/common/ErrorMessage';
 import FaInbox from '@/components/Icons/FaInbox';
 import { verifierConfig } from '@/utils/app/config';
+import { useThemeStore } from '@/stores/theme';
 
 type VerifiedDataProps = {
   verifierData: VerifierData;
@@ -49,7 +49,7 @@ const VerifiedData: React.FC<VerifiedDataProps> = ({
     {},
   );
 
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
 
   useEffect(() => {
     const fetchCode = async () => {
diff --git a/apps/app/src/components/app/Advertise/ThemeImage.tsx b/apps/app/src/components/app/Advertise/ThemeImage.tsx
index 7bae51ae9..d15c598f8 100644
--- a/apps/app/src/components/app/Advertise/ThemeImage.tsx
+++ b/apps/app/src/components/app/Advertise/ThemeImage.tsx
@@ -1,9 +1,9 @@
 'use client';
-import { useTheme } from 'next-themes';
+import { useThemeStore } from '@/stores/theme';
 import Image from 'next/legacy/image';
 
 export default function ThemeImage() {
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
 
   return (
     <Image
diff --git a/apps/app/src/components/app/Apis/ApiActions.tsx b/apps/app/src/components/app/Apis/ApiActions.tsx
index 43a88f8d2..d57ad0386 100644
--- a/apps/app/src/components/app/Apis/ApiActions.tsx
+++ b/apps/app/src/components/app/Apis/ApiActions.tsx
@@ -9,9 +9,9 @@ import { dollarFormat, dollarNonCentFormat } from '@/utils/libs';
 import Link from 'next/link';
 import { useState } from 'react';
 import Skeleton from '../skeleton/common/Skeleton';
-import { useTheme } from 'next-themes';
 import { toast } from 'react-toastify';
 import LoadingCircular from '@/components/common/LoadingCircular';
+import { useThemeStore } from '@/stores/theme';
 
 const ApiActions = ({
   status,
@@ -22,7 +22,7 @@ const ApiActions = ({
   planDetails: any;
   getContactDetails: any;
 }) => {
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const [interval, setInterval] = useState(true);
 
   const [subject, _setSubject] = useState('API');
diff --git a/apps/app/src/components/app/Charts/Chart.tsx b/apps/app/src/components/app/Charts/Chart.tsx
index 674d3c2c7..4fc34773e 100644
--- a/apps/app/src/components/app/Charts/Chart.tsx
+++ b/apps/app/src/components/app/Charts/Chart.tsx
@@ -5,12 +5,12 @@ import SwitchButton from '../SwitchButton';
 import { yoctoToNear } from '@/utils/libs';
 import { ChartConfig, ChartStat, ChartTypeInfo } from '@/utils/types';
 import { Tooltip } from '@reach/tooltip';
-import { useTheme } from 'next-themes';
 import Skeleton from '../skeleton/common/Skeleton';
 import Image from 'next/legacy/image';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import { useConfig } from '@/hooks/app/useConfig';
+import { useThemeStore } from '@/stores/theme';
 
 interface Props {
   chartTypes?: string;
@@ -24,7 +24,7 @@ interface Props {
 const Chart = (props: Props) => {
   const { chartTypes, poweredBy, chartsData } = props;
   const t = useTranslations();
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const [chartConfig, setChartConfig] = useState<ChartConfig | null>(null);
   const [chartInfo, setChartInfo] = useState<ChartTypeInfo>({
     title: '',
diff --git a/apps/app/src/components/app/Charts/TpsChart.tsx b/apps/app/src/components/app/Charts/TpsChart.tsx
index 730013f93..0766961b8 100644
--- a/apps/app/src/components/app/Charts/TpsChart.tsx
+++ b/apps/app/src/components/app/Charts/TpsChart.tsx
@@ -4,12 +4,12 @@ import SwitchButton from '../SwitchButton';
 import Question from '../Icons/Question';
 import { chartDataInfo } from '@/utils/types';
 import { Tooltip } from '@reach/tooltip';
-import { useTheme } from 'next-themes';
 import Image from 'next/image';
 import Skeleton from '../skeleton/common/Skeleton';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import { useConfig } from '@/hooks/app/useConfig';
+import { useThemeStore } from '@/stores/theme';
 
 interface Props {
   chartTypes: string;
@@ -21,7 +21,7 @@ interface Props {
 }
 const TpsChart = (props: Props) => {
   const { chartTypes, poweredBy, data } = props;
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const t = useTranslations();
   const { networkId } = useConfig();
 
diff --git a/apps/app/src/components/app/Contact/FormContact.tsx b/apps/app/src/components/app/Contact/FormContact.tsx
index e6bdc7ef5..545725705 100644
--- a/apps/app/src/components/app/Contact/FormContact.tsx
+++ b/apps/app/src/components/app/Contact/FormContact.tsx
@@ -4,9 +4,9 @@ import { toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { Turnstile } from '@marsidev/react-turnstile';
 import type { TurnstileInstance } from '@marsidev/react-turnstile';
-import { useTheme } from 'next-themes';
 import { useTranslations } from 'next-intl';
 import LoadingCircular from '@/components/common/LoadingCircular';
+import { useThemeStore } from '@/stores/theme';
 
 interface Props {
   selectValue?: string;
@@ -16,7 +16,7 @@ interface Props {
 const siteKey = process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY;
 
 const FormContact = ({ selectValue, getContactDetails }: Props) => {
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const t = useTranslations('contact');
 
   const [loading, setLoading] = useState(false);
diff --git a/apps/app/src/components/app/Layouts/Footer.tsx b/apps/app/src/components/app/Layouts/Footer.tsx
index 1c06ca06b..beaa09f6c 100644
--- a/apps/app/src/components/app/Layouts/Footer.tsx
+++ b/apps/app/src/components/app/Layouts/Footer.tsx
@@ -1,12 +1,12 @@
 'use client';
 import Image from 'next/legacy/image';
 import Arrow from '../Icons/Arrow';
-import { useTheme } from 'next-themes';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
+import { useThemeStore } from '@/stores/theme';
 
 const Footer = () => {
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const currentDate = new Date();
   const t = useTranslations();
 
diff --git a/apps/app/src/components/app/Layouts/Header.tsx b/apps/app/src/components/app/Layouts/Header.tsx
index b074e14f8..b67df7641 100644
--- a/apps/app/src/components/app/Layouts/Header.tsx
+++ b/apps/app/src/components/app/Layouts/Header.tsx
@@ -10,12 +10,12 @@ import ActiveLink from '../ActiveLink';
 import Skeleton from '@/components/skeleton/common/Skeleton';
 import { dollarFormat, nanoToMilli } from '@/utils/libs';
 import User from '../Icons/User';
-import { useTheme } from 'next-themes';
 import { BlocksInfo, Stats } from '@/utils/types';
 import { Link, routing, usePathname } from '@/i18n/routing';
 import { useTranslations } from 'next-intl';
 import Search from '../common/Search';
 import { useConfig } from '@/hooks/app/useConfig';
+import { useThemeStore } from '@/stores/theme';
 
 const menus = [
   {
@@ -165,7 +165,8 @@ const Header = ({
   const t = useTranslations();
   const { networkId } = useConfig();
   const pathname = usePathname();
-  const { theme, setTheme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
+
   const status = useMemo(() => {
     if (block?.block_timestamp) {
       const timestamp = nanoToMilli(block?.block_timestamp);
@@ -180,6 +181,12 @@ const Header = ({
     return true;
   }, [block]);
 
+  const toggleTheme = () => {
+    localStorage.setItem('theme', theme === 'light' ? 'dark' : 'light');
+    document.documentElement.classList.toggle('dark');
+    document.documentElement.classList.toggle('light');
+  };
+
   const showSearch = pathname !== '/';
   const userLoading = false;
 
@@ -300,7 +307,7 @@ const Header = ({
             <div className="flex md:!hidden items-center justify-center ml-auto p-3 md:p-4">
               <button
                 className="py-2 h-6 w-[36px] bg-gray-100 dark:bg-black-200 rounded mx-4 flex items-center justify-center"
-                onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+                onClick={toggleTheme}
               >
                 <Image
                   src={`/images/${theme === 'dark' ? 'moon.svg' : 'sun.svg'}`}
@@ -667,9 +674,7 @@ const Header = ({
                       >
                         <div
                           className="py-2 px-3 h-9 w-[38px] bg-gray-100 dark:bg-black-200 rounded cursor-pointer"
-                          onClick={() =>
-                            setTheme(theme === 'light' ? 'dark' : 'light')
-                          }
+                          onClick={toggleTheme}
                         >
                           <Image
                             src={`/images/${
diff --git a/apps/app/src/components/app/Layouts/Layout.tsx b/apps/app/src/components/app/Layouts/Layout.tsx
index 00ad29533..a1acd43df 100644
--- a/apps/app/src/components/app/Layouts/Layout.tsx
+++ b/apps/app/src/components/app/Layouts/Layout.tsx
@@ -4,7 +4,6 @@ import { getRequest } from '@/utils/app/api';
 import LayoutActions from './LayoutActions';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages } from 'next-intl/server';
-import { ThemeProvider } from 'next-themes';
 import { Manrope } from 'next/font/google';
 import Script from 'next/script';
 import { PublicEnvProvider } from 'next-runtime-env';
@@ -85,7 +84,11 @@ const Layout = async ({ children }: LayoutProps) => {
   };
 
   return (
-    <html className={manrope.className} suppressHydrationWarning lang="en">
+    <html
+      className={`${manrope.className} light`}
+      suppressHydrationWarning
+      lang="en"
+    >
       <head>
         <link
           rel="apple-touch-icon"
@@ -116,7 +119,6 @@ const Layout = async ({ children }: LayoutProps) => {
             style={{ display: 'none', visibility: 'hidden' }}
           />
         </noscript>
-
         <Script id="gtm" strategy="afterInteractive">
           {`
             (function(w,d,s,l,i){
@@ -131,19 +133,29 @@ const Layout = async ({ children }: LayoutProps) => {
             })(window,document,'script','dataLayer','${process.env.NEXT_PUBLIC_GTM_ID}');
           `}
         </Script>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function initTheme() {
+                var theme = localStorage.getItem('theme') || 'light'
+                if (theme === 'dark') {
+                  document.documentElement.classList.remove('light');
+                  document.documentElement.classList.add('dark');
+                }
+              })();`,
+          }}
+          id="theme-script"
+        />
         <PublicEnvProvider>
-          <ThemeProvider attribute="class" enableSystem={false}>
-            <NextIntlClientProvider messages={messages}>
-              <ToastContainer />
-              <LayoutActions
-                stats={stats}
-                blocks={blocks}
-                handleFilterAndKeyword={handleFilterAndKeyword}
-              >
-                {children}
-              </LayoutActions>
-            </NextIntlClientProvider>
-          </ThemeProvider>
+          <NextIntlClientProvider messages={messages}>
+            <ToastContainer />
+            <LayoutActions
+              stats={stats}
+              blocks={blocks}
+              handleFilterAndKeyword={handleFilterAndKeyword}
+            >
+              {children}
+            </LayoutActions>
+          </NextIntlClientProvider>
         </PublicEnvProvider>
       </body>
     </html>
diff --git a/apps/app/src/components/app/Layouts/LayoutActions.tsx b/apps/app/src/components/app/Layouts/LayoutActions.tsx
index 959ebaab4..edba80fc8 100644
--- a/apps/app/src/components/app/Layouts/LayoutActions.tsx
+++ b/apps/app/src/components/app/Layouts/LayoutActions.tsx
@@ -4,7 +4,8 @@ import Header from './Header';
 import Footer from './Footer';
 import { ReactNode } from 'react';
 import NextTopLoader from 'nextjs-toploader';
-import { useTheme } from 'next-themes';
+import { useThemeStore } from '@/stores/theme';
+import { useTheme } from '@/hooks/app/useTheme';
 
 interface LayoutProps {
   children: ReactNode;
@@ -22,7 +23,8 @@ const LayoutActions = ({
   handleFilterAndKeyword,
 }: LayoutProps) => {
   const pathname = usePathname();
-  const theme: any = useTheme();
+  useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const className =
     pathname === '/404'
       ? 'bg-white dark:bg-black-300'
diff --git a/apps/app/src/components/app/Layouts/RpcMenu.tsx b/apps/app/src/components/app/Layouts/RpcMenu.tsx
index cf6334f44..b2807babe 100644
--- a/apps/app/src/components/app/Layouts/RpcMenu.tsx
+++ b/apps/app/src/components/app/Layouts/RpcMenu.tsx
@@ -42,7 +42,7 @@ const RpcMenu = () => {
     <li className="relative group flex h-8 justify-end max-md:mb-2">
       <span className="border rounded-md bg-gray-100 dark:bg-black-200 text-nearblue-600 dark:text-neargray-10 hover:text-green-500 dark:hover:text-green-250 ">
         <div className="absolute max-md:hidden left-2.5 top-2 md:flex items-center pointer-events-none">
-          <Rpc className="h-3.5 dark:filter dark:invert" />
+          <Rpc className="h-3.5 dark:text-neargray-10" />
         </div>
         <button
           className={`h-full max-md:!w-24 md:w-28 pl-3 pr-6 md:!px-7 py-1 truncate cursor-pointer focus:outline-none appearance-none`}
diff --git a/apps/app/src/components/app/NodeExplorer/Delegators.tsx b/apps/app/src/components/app/NodeExplorer/Delegators.tsx
index c4d2e9564..5fd7e35be 100644
--- a/apps/app/src/components/app/NodeExplorer/Delegators.tsx
+++ b/apps/app/src/components/app/NodeExplorer/Delegators.tsx
@@ -6,7 +6,6 @@ import { useEffect, useRef, useState } from 'react';
 import { Tooltip } from '@reach/tooltip';
 import useRpc from '@/hooks/useRpc';
 import Image from 'next/image';
-import { useTheme } from 'next-themes';
 import { debounce } from 'lodash';
 import Skeleton from '../skeleton/common/Skeleton';
 import Table from '../common/Table';
@@ -16,6 +15,7 @@ import { useRpcStore } from '@/stores/rpc';
 import { Link } from '@/i18n/routing';
 import { useSearchParams } from 'next/navigation';
 import { useConfig } from '@/hooks/app/useConfig';
+import { useThemeStore } from '@/stores/theme';
 
 interface Props {
   accountId: string;
@@ -33,7 +33,7 @@ const Delegators = ({ accountId }: Props) => {
   const { networkId } = useConfig();
   const searchParams = useSearchParams();
   const page = searchParams?.get('page');
-  const { theme }: any = useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(true);
   const [currentEpochInfo, setCurrentEpochInfo] =
diff --git a/apps/app/src/components/app/NodeExplorer/NodeListActions.tsx b/apps/app/src/components/app/NodeExplorer/NodeListActions.tsx
index b57a1ee56..38ed903d4 100644
--- a/apps/app/src/components/app/NodeExplorer/NodeListActions.tsx
+++ b/apps/app/src/components/app/NodeExplorer/NodeListActions.tsx
@@ -15,14 +15,14 @@ import ErrorMessage from '../common/ErrorMessage';
 import FaInbox from '../Icons/FaInbox';
 import { Tooltip } from '@reach/tooltip';
 import { ValidatorEpochData } from 'nb-types';
-import { useTheme } from 'next-themes';
 import Table from '../common/Table';
 import Big from 'big.js';
 import Image from 'next/image';
 import { Link } from '@/i18n/routing';
+import { useThemeStore } from '@/stores/theme';
 
 const NodeListActions = ({ data, totalSupply, latestBlock, error }: any) => {
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const [page, setPage] = useState(1);
   const [totalCount, setTotalCount] = useState<number>(0);
   const [expanded, setExpanded] = useState<number[]>([]);
diff --git a/apps/app/src/components/app/Transactions/Overview.tsx b/apps/app/src/components/app/Transactions/Overview.tsx
index 1f2d036e5..e213b37bd 100644
--- a/apps/app/src/components/app/Transactions/Overview.tsx
+++ b/apps/app/src/components/app/Transactions/Overview.tsx
@@ -9,12 +9,12 @@ import Skeleton from '../skeleton/common/Skeleton';
 import { gasPrice } from '@/utils/near';
 import { useEffect, useMemo, useState } from 'react';
 import { ChartConfigType, ChartInfo, StatusInfo } from '@/utils/types';
-import { useTheme } from 'next-themes';
 import { Tooltip } from '@reach/tooltip';
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { Link } from '@/i18n/routing';
 import { useConfig } from '@/hooks/app/useConfig';
+import { useThemeStore } from '@/stores/theme';
 
 interface Props {
   stats: StatusInfo;
@@ -24,10 +24,9 @@ interface Props {
 
 const Overview = ({ stats, chartsDetails, error }: Props) => {
   const t = useTranslations();
-  const { theme, systemTheme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
   const [mounted, setMounted] = useState(false);
   const [chartConfig, setChartConfig] = useState<ChartConfigType>(null);
-  const currentTheme = theme === 'system' ? systemTheme : theme;
   const { networkId } = useConfig();
 
   const LoadingSkeleton = () => {
@@ -166,7 +165,7 @@ const Overview = ({ stats, chartsDetails, error }: Props) => {
           labels: {
             step: 7,
             style: {
-              color: currentTheme === 'dark' ? '#e0e0e0' : '#333333',
+              color: theme === 'dark' ? '#e0e0e0' : '#333333',
             },
           },
           categories: chartData.categories,
@@ -178,7 +177,7 @@ const Overview = ({ stats, chartsDetails, error }: Props) => {
           },
           labels: {
             style: {
-              color: currentTheme === 'dark' ? '#e0e0e0' : '#333333',
+              color: theme === 'dark' ? '#e0e0e0' : '#333333',
             },
           },
         },
@@ -216,7 +215,7 @@ const Overview = ({ stats, chartsDetails, error }: Props) => {
     }
 
     fetchData();
-  }, [chartData, currentTheme, mounted]);
+  }, [chartData, theme, mounted]);
 
   const iframeSrc = chartConfig
     ? `
@@ -224,7 +223,7 @@ const Overview = ({ stats, chartsDetails, error }: Props) => {
       <head>
       <style>
       body, html{
-        background-color: ${currentTheme === 'dark' ? '#0D0D0D' : '#ffff'};
+        background-color: ${theme === 'dark' ? '#0D0D0D' : '#ffff'};
       }
       </style>
         <script src="https://code.highcharts.com/highcharts.js"></script>
diff --git a/apps/app/src/components/app/common/QrCode.tsx b/apps/app/src/components/app/common/QrCode.tsx
index 55ade796c..0734396d6 100644
--- a/apps/app/src/components/app/common/QrCode.tsx
+++ b/apps/app/src/components/app/common/QrCode.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from 'next-themes';
+import { useThemeStore } from '@/stores/theme';
 
 /**
  * @interface Props
@@ -14,7 +14,7 @@ interface Props {
 }
 
 const QrCode = (props: Props) => {
-  const { theme } = useTheme();
+  const theme = useThemeStore((store) => store.theme);
 
   const colorDark = theme === 'dark' ? '#ffffff' : '#000000';
   const colorLight = theme === 'dark' ? '#000000' : '#ffffff';
diff --git a/apps/app/src/components/common/Links.tsx b/apps/app/src/components/common/Links.tsx
index 86cca34d1..ae5278bf9 100644
--- a/apps/app/src/components/common/Links.tsx
+++ b/apps/app/src/components/common/Links.tsx
@@ -1,6 +1,6 @@
+import { useThemeStore } from '@/stores/theme';
 import { urlHostName } from '@/utils/libs';
 import { Tooltip } from '@reach/tooltip';
-import { useTheme } from 'next-themes';
 import Image from 'next/legacy/image';
 
 const Links = (props: any) => {
@@ -8,7 +8,7 @@ const Links = (props: any) => {
   const twitter = urlHostName && urlHostName(meta?.twitter);
   const facebook = urlHostName && urlHostName(meta?.facebook);
   const telegram = urlHostName && urlHostName(meta?.telegram);
-  const { theme }: any = useTheme();
+  const theme = useThemeStore((store) => store.theme);
 
   return (
     <div className="flex space-x-4">
diff --git a/apps/app/src/hooks/app/useTheme.ts b/apps/app/src/hooks/app/useTheme.ts
new file mode 100644
index 000000000..7c16fca04
--- /dev/null
+++ b/apps/app/src/hooks/app/useTheme.ts
@@ -0,0 +1,32 @@
+import { useThemeStore } from '@/stores/theme';
+import { useEffect } from 'react';
+
+export const useTheme = () => {
+  const setTheme = useThemeStore((state) => state.setTheme);
+
+  useEffect(() => {
+    const updateTheme = (elm: HTMLElement) =>
+      setTheme(elm.className.includes('dark') ? 'dark' : 'light');
+
+    const observer = new MutationObserver((mutationsList) => {
+      for (let mutation of mutationsList) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'class'
+        ) {
+          updateTheme(mutation.target as HTMLElement);
+        }
+      }
+    });
+
+    updateTheme(document.documentElement);
+    observer.observe(document.documentElement, {
+      attributeFilter: ['class'],
+      attributes: true,
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [setTheme]);
+};
diff --git a/apps/app/src/stores/theme.ts b/apps/app/src/stores/theme.ts
new file mode 100644
index 000000000..c2343a483
--- /dev/null
+++ b/apps/app/src/stores/theme.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+type ThemeState = {
+  setTheme: (theme: string) => void;
+  theme: string;
+};
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  setTheme: (theme) => set(() => ({ theme })),
+  theme: 'light',
+}));