From e03ed9321f55e7622183d9d3aec601589d1ea9cb Mon Sep 17 00:00:00 2001
From: Raul Glogovetan <raul@glogovetan.com>
Date: Wed, 22 Jan 2025 03:05:57 +0200
Subject: [PATCH] Add: `Entry` introduce top level app dark mode

---
 src/Entry.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/Entry.tsx b/src/Entry.tsx
index e9e4b29c2b..0571b6ce2e 100644
--- a/src/Entry.tsx
+++ b/src/Entry.tsx
@@ -5,7 +5,7 @@ import {
   mergeNetworks,
 } from '@dynamic-labs/sdk-react-core';
 import { PostHogProvider } from 'posthog-js/react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { IntlProvider } from 'react-intl';
 import { Provider as ReduxProvider } from 'react-redux';
@@ -43,10 +43,25 @@ if (__COMMIT_HASH__) {
 
 const Entry = ({ store }: Props) => {
   const apolloClient = getContext(ContextModule.ApolloClient);
+  const [isDarkMode, setIsDarkMode] = useState(
+    localStorage.getItem('isDarkMode') === 'true' || false,
+  );
+
+  useEffect(() => {
+    function checkAppTheme() {
+      setIsDarkMode(localStorage.getItem('isDarkMode') === 'true');
+    }
+    window.addEventListener('storage', checkAppTheme);
+
+    return () => {
+      window.removeEventListener('storage', checkAppTheme);
+    };
+  }, []);
 
   return (
     <DynamicContextProvider
       mobileExperience="redirect"
+      theme={isDarkMode ? 'dark' : 'light'}
       logLevel={import.meta.env.DEV ? 'warn' : 'error'}
       settings={{
         environmentId: import.meta.env.DYNAMIC_ENV_ID,