feat(dark-mode): add dark mode theme support in the theme provider

apps/tx-builder/src/index.tsx

@@ -13,7 +13,7 @@ import { ThemeProvider } from 'styled-components'
 ReactDOM.render(
   <>
     <GlobalStyles />
-    <SafeThemeProvider mode="light">
+    <SafeThemeProvider>
       {theme => (
         <ThemeProvider theme={theme}>
           <SafeProvider>

apps/tx-builder/src/theme/SafeThemeProvider.tsx

@@ -1,15 +1,34 @@
-import { useMemo, type FC } from 'react'
-import { type PaletteMode, type Theme } from '@mui/material'
+import { useEffect, useMemo, useState, type FC } from 'react'
+import { type Theme } from '@mui/material'
 import { ThemeProvider } from '@material-ui/core'
 import createSafeTheme from './safeTheme'
+import { getSDKVersion } from '@safe-global/safe-apps-sdk'
 
 type SafeThemeProviderProps = {
   children: (theme: Theme) => React.ReactNode
-  mode: PaletteMode
 }
 
-const SafeThemeProvider: FC<SafeThemeProviderProps> = ({ children, mode }) => {
-  const theme = useMemo(() => createSafeTheme(mode), [mode])
+const SafeThemeProvider: FC<SafeThemeProviderProps> = ({ children }) => {
+  const [isDarkMode, setDarkMode] = useState(false)
+
+  const theme = useMemo(() => createSafeTheme(isDarkMode ? 'dark' : 'light'), [isDarkMode])
+
+  useEffect(() => {
+    window.parent.postMessage(
+      {
+        id: 'tx-builder',
+        env: { sdkVersion: getSDKVersion() },
+        method: 'getCurrentTheme',
+      },
+      '*',
+    )
+
+    window.addEventListener('message', function (event) {
+      if (!event.data?.data.hasOwnProperty('darkMode')) return
+
+      setDarkMode(event.data?.data.darkMode)
+    })
+  }, [])
 
   return <ThemeProvider theme={theme}>{children(theme)}</ThemeProvider>
 }

apps/tx-builder/src/theme/darkPalette.ts

@@ -0,0 +1,68 @@
+const darkPalette = {
+  text: {
+    primary: '#FFFFFF',
+    secondary: '#636669',
+    disabled: '#636669',
+  },
+  primary: {
+    dark: '#0cb259',
+    main: '#12FF80',
+    light: '#A1A3A7',
+  },
+  secondary: {
+    dark: '#636669',
+    main: '#FFFFFF',
+    light: '#B0FFC9',
+    background: '#1B2A22',
+  },
+  border: {
+    main: '#636669',
+    light: '#303033',
+    background: '#121312',
+  },
+  error: {
+    dark: '#AC2C3B',
+    main: '#FF5F72',
+    light: '#FFB4BD',
+    background: '#2F2527',
+  },
+  success: {
+    dark: '#028D4C',
+    main: '#00B460',
+    light: '#81C784',
+    background: '#1F2920',
+  },
+  info: {
+    dark: '#52BFDC',
+    main: '#5FDDFF',
+    light: '#B7F0FF',
+    background: '#19252C',
+  },
+  warning: {
+    dark: '#C04C32',
+    main: '#FF8061',
+    light: '#FFBC9F',
+    background: '#2F2318',
+  },
+  background: {
+    default: '#121312',
+    main: '#121312',
+    paper: '#1C1C1C',
+    light: '#1B2A22',
+  },
+  backdrop: {
+    main: '#636669',
+  },
+  logo: {
+    main: '#FFFFFF',
+    background: '#303033',
+  },
+  static: {
+    main: '#121312',
+  },
+  code: {
+    main: 'transparent',
+  },
+}
+
+export default darkPalette

apps/tx-builder/src/theme/safeTheme.ts

@@ -4,6 +4,7 @@ import type { Shadows } from '@mui/material/styles'
 import { createTheme } from '@mui/material/styles'
 
 import palette from './lightPalette'
+import darkPalette from './darkPalette'
 import typography from './typography'
 
 export const base = 8
@@ -67,12 +68,13 @@ declare module '@mui/material/IconButton' {
 
 const createSafeTheme = (mode: PaletteMode): Theme => {
   const isDarkMode = mode === 'dark'
-  const shadowColor = palette.primary.light
+  const colors = isDarkMode ? darkPalette : palette
+  const shadowColor = colors.primary.light
 
   return createTheme({
     palette: {
       mode: isDarkMode ? 'dark' : 'light',
-      ...palette,
+      ...colors,
     },
     spacing: base,
     shape: {
@@ -515,6 +517,4 @@ const createSafeTheme = (mode: PaletteMode): Theme => {
   })
 }
 
-export const defaultTheme = createSafeTheme('light')
-
 export default createSafeTheme