Feature: dark mode

src/components/AppLayout/Header/components/Layout.tsx

@@ -100,7 +100,7 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
     <Row className={classes.summary}>
       <Col className={classes.logo} middle="xs" start="xs">
         <Link to={WELCOME_ROUTE}>
-          <Img alt="Gnosis Safe" height={36} src={SafeLogo} testId="heading-gnosis-logo" />
+          <Img alt="Gnosis Safe" height={36} src={SafeLogo} testId="heading-gnosis-logo" id="safe-logo" />
         </Link>
       </Col>
 

src/components/AppLayout/index.tsx

@@ -9,6 +9,7 @@ import Footer from './Footer'
 import Sidebar from './Sidebar'
 import { MobileNotSupported } from './MobileNotSupported'
 import { SAFE_ROUTES, WELCOME_ROUTE } from 'src/routes/routes'
+import useDarkMode from 'src/logic/hooks/useDarkMode'
 
 const Container = styled.div`
   height: 100vh;
@@ -92,6 +93,7 @@ const Layout: React.FC<Props> = ({
 }): React.ReactElement => {
   const [mobileNotSupportedClosed, setMobileNotSupportedClosed] = useState(false)
   const { pathname } = useLocation()
+  useDarkMode()
 
   const closeMobileNotSupported = () => setMobileNotSupportedClosed(true)
 

src/components/Root/index.module.scss

@@ -44,4 +44,10 @@ body {
 body > div:first-child {
   display: flex;
   min-height: 100%;
-}
+}
+
+html[class="darkMode"],
+html[class="darkMode"] div[style*="background-image"],
+html[class="darkMode"] img:not([id="safe-logo"]) {
+  filter: invert(1) hue-rotate(180deg);
+}

src/logic/hooks/useDarkMode.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import useCachedState from 'src/utils/storage/useCachedState'
+
+const useDarkMode = (): [boolean, (mode: boolean) => void] => {
+  const [darkMode = false, setDarkMode] = useCachedState<boolean>('darkMode')
+
+  const toggleDarkMode = (toggle: boolean): void => {
+    document.documentElement.className = toggle ? 'darkMode' : ''
+  }
+
+  useEffect(() => {
+    toggleDarkMode(darkMode)
+  }, [darkMode])
+
+  return [darkMode, setDarkMode]
+}
+
+export default useDarkMode

src/routes/safe/components/Settings/Appearance/index.tsx

@@ -15,6 +15,7 @@ import { setCopyShortName } from 'src/logic/appearance/actions/setCopyShortName'
 import { extractSafeAddress } from 'src/routes/routes'
 import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
 import { useAnalytics, SETTINGS_EVENTS } from 'src/utils/googleAnalytics'
+import useDarkMode from 'src/logic/hooks/useDarkMode'
 
 // Other settings sections use MUI createStyles .container
 // will adjust that during dark mode implementation
@@ -31,6 +32,7 @@ const Appearance = (): ReactElement => {
   const copyShortName = useSelector(copyShortNameSelector)
   const showShortName = useSelector(showShortNameSelector)
   const safeAddress = extractSafeAddress()
+  const [darkMode, setDarkMode] = useDarkMode()
 
   const { trackEvent } = useAnalytics()
 
@@ -48,21 +50,33 @@ const Appearance = (): ReactElement => {
     dispatch(setCopyShortName({ copyShortName: checked }))
 
   return (
-    <Container>
-      <Heading tag="h2">Use Chain-Specific Addresses</Heading>
-      <Paragraph>You can choose whether to prepend EIP-3770 short chain names accross Safes.</Paragraph>
-      <StyledPrefixedEthHashInfo hash={safeAddress} />
-      <FormGroup>
-        <FormControlLabel
-          control={<Checkbox checked={showShortName} onChange={handleShowChange} name="showShortName" />}
-          label="Prepend addresses with chain prefix."
-        />
-        <FormControlLabel
-          control={<Checkbox checked={copyShortName} onChange={handleCopyChange} name="copyShortName" />}
-          label="Copy addresses with chain prefix."
-        />
-      </FormGroup>
-    </Container>
+    <>
+      <Container>
+        <Heading tag="h2">Use Chain-Specific Addresses</Heading>
+        <Paragraph>You can choose whether to prepend EIP-3770 short chain names accross Safes.</Paragraph>
+        <StyledPrefixedEthHashInfo hash={safeAddress} />
+        <FormGroup>
+          <FormControlLabel
+            control={<Checkbox checked={showShortName} onChange={handleShowChange} name="showShortName" />}
+            label="Prepend addresses with chain prefix."
+          />
+          <FormControlLabel
+            control={<Checkbox checked={copyShortName} onChange={handleCopyChange} name="copyShortName" />}
+            label="Copy addresses with chain prefix."
+          />
+        </FormGroup>
+      </Container>
+
+      <Container>
+        <Heading tag="h2">Dark mode (experimental)</Heading>
+        <FormGroup>
+          <FormControlLabel
+            control={<Checkbox checked={darkMode} onChange={() => setDarkMode(!darkMode)} name="showShortName" />}
+            label={`Switch to ${darkMode ? 'light' : 'dark'} mode`}
+          />
+        </FormGroup>
+      </Container>
+    </>
   )
 }