wip dark mode

ensdomains · Dec 13, 2024 · 378b2d7 · 378b2d7
1 parent 45af67d
commit 378b2d7
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 4 deletions.
diff --git a/src/components/@molecules/Hamburger/MainMenu.tsx b/src/components/@molecules/Hamburger/MainMenu.tsx
@@ -7,7 +7,9 @@ import {
   LanguageSVG,
   RightChevronSVG,
   Spinner,
+  ThemeToggle,
   Typography,
+  useTheme,
   WalletSVG,
 } from '@ensdomains/thorin'
 
@@ -213,6 +215,16 @@ const NetworkSectionRow = styled.div(
   `,
 )
 
+const DarkModeItem = styled.div(
+  ({ theme }) => css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: ${theme.space['2']};
+  `,
+)
+
 const NetworkSection = () => {
   const { t } = useTranslation('common')
   const graphOutOfSync = useGraphOutOfSync()
@@ -253,20 +265,21 @@ const MainMenu = ({ setCurrentView }: { setCurrentView: (view: 'main' | 'languag
   const { t, i18n } = useTranslation('common')
   const language = i18n.resolvedLanguage || 'en'
   const { userConfig, setCurrency } = useUserConfig()
+  const { setMode, mode } = useTheme()
 
   return (
     <Container>
       <SettingsSection>
         <HoverableSettingsItem onClick={() => setCurrentView('language')}>
           <div>
-            <LanguageSVG />
+            <LanguageSVG height={16} width={16} />
             <Typography weight="bold">{t('navigation.language')}</Typography>
           </div>
           <div>
             <Typography>
               {ISO6391.getNativeName(language)} ({language.toLocaleUpperCase()})
             </Typography>
-            <RightChevronSVG />
+            <RightChevronSVG height={16} width={16} />
           </div>
         </HoverableSettingsItem>
         <SettingsItem>
@@ -283,6 +296,18 @@ const MainMenu = ({ setCurrentView }: { setCurrentView: (view: 'main' | 'languag
             />
           </div>
         </SettingsItem>
+        <DarkModeItem>
+          NEW!
+          <ThemeToggle
+            size="extraSmall"
+            onChange={(e) => {
+              const newValue = e.target.checked ? 'light' : 'dark'
+              if (newValue !== mode) {
+                setMode(newValue)
+              }
+            }}
+          />
+        </DarkModeItem>
       </SettingsSection>
       <RoutesSection>
         {disconnectedRoutes.map((route) => (

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import { lightTheme, RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit'
 
 import '@rainbow-me/rainbowkit/styles.css'
@@ -12,6 +13,7 @@ import { IntercomProvider } from 'react-use-intercom'
 import { createGlobalStyle, keyframes, ThemeProvider } from 'styled-components'
 
 import {
+  Mode,
   lightTheme as thorinLightTheme,
   ThemeProvider as ThorinThemeProvider,
 } from '@ensdomains/thorin'
@@ -143,6 +145,14 @@ type AppPropsWithLayout = AppProps & {
 
 setupAnalytics()
 
+declare global {
+  interface Window {
+    __theme: Mode
+    __setPreferredTheme: (theme: Mode) => void
+    __onThemeChange: (theme: Mode) => void
+  }
+}
+
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page)
 
@@ -153,7 +163,10 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
           <TransactionStoreProvider>
             <ThemeProvider theme={thorinLightTheme}>
               <BreakpointProvider queries={breakpoints}>
-                <ThorinThemeProvider defaultMode="light">
+                <ThorinThemeProvider
+                  onThemeChange={(mode) => window.__setPreferredTheme(mode)}
+                  defaultMode={typeof window !== 'undefined' ? window.__theme : 'light'}
+                >
                   <IntercomProvider appId={INTERCOM_ID}>
                     <GlobalStyle />
                     <SyncProvider>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-danger */
 import { AppPropsType, AppType } from 'next/dist/shared/lib/utils'
 import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'
 import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
@@ -80,8 +81,38 @@ export default class MyDocument extends Document {
               content="worker-src 'self'; script-src 'self' 'sha256-UyYcl+sKCF/ROFZPHBlozJrndwfNiC5KT5ZZfup/pPc=' plausible.io static.cloudflareinsights.com *.ens-app-v3.pages.dev https://app.intercom.io https://widget.intercom.io https://js.intercomcdn.com 'wasm-unsafe-eval';"
             />
           )}
-          {/* eslint-disable-next-line react/no-danger */}
           <script dangerouslySetInnerHTML={{ __html: hiddenCheckScript }} />
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `(function () {
+    function setTheme(newTheme) {
+        document.documentElement.setAttribute('data-theme', newTheme);
+        window.__theme = newTheme;
+        window.__onThemeChange(newTheme);
+    }
+    window.__onThemeChange = function () {};
+    window.__setPreferredTheme = function (newTheme) {
+        setTheme(newTheme);
+        try {
+            localStorage.setItem("theme", JSON.stringify(window.__theme));
+        } catch (err) {}
+    };
+
+    const darkQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    darkQuery.addListener(function (event) {
+        window.__setPreferredTheme(event.matches ? "dark" : "light");
+    });
+
+    let preferredTheme;
+    try {
+        preferredTheme = JSON.parse(localStorage.getItem("theme"));
+    } catch (err) {}
+    
+    setTheme(preferredTheme || (darkQuery.matches ? "dark" : "light"));
+})();
+            `,
+            }}
+          />
           {process.env.NEXT_PUBLIC_IPFS && (
             <>
               {/* eslint-disable-next-line react/no-danger */}