feat: add dark mode (#2322)

* feat: add theme provider

* Update src/index.css

Co-authored-by: Russell Dempsey <[email protected]>

* Update src/index.css

Co-authored-by: Russell Dempsey <[email protected]>

* Update src/index.css

Co-authored-by: Russell Dempsey <[email protected]>

* Update src/hooks/theme.ts

Co-authored-by: Russell Dempsey <[email protected]>

* Update src/context/theme-provider.tsx

Co-authored-by: Russell Dempsey <[email protected]>

* Update src/hooks/theme.ts

Co-authored-by: Russell Dempsey <[email protected]>

* Update src/hooks/theme.ts

Co-authored-by: Russell Dempsey <[email protected]>

* refactor: useTheme hook based on feedback provided

* chore: refactor the theme hoook

- previously, pretty much all the keys on the keyboard can trigger the theme toggle when it is focused. we don't want that. Instead we should only limit it to specific keys (spacebar & enter).
- include all the varying colors when the theme is dark on all routes
- extend the Box component to use the theme value instead of explicitly passing it in the style prop across the codebase

* fix: theme uses system settings and listens for changes

* fix: storybook testing

* fix: theme hook and provider context values

---------

Co-authored-by: Russell Dempsey <[email protected]>

Author: kaf-lamed-beyt

.storybook/preview.js

@@ -9,24 +9,27 @@ import getStore from '../src/bundles/index.js'
 import i18n from '../src/i18n.js'
 import DndBackend from '../src/lib/dnd-backend.js'
 import { HeliaProvider, ExploreProvider } from 'ipld-explorer-components/providers'
+import { ThemeProvider } from '../src/context/theme-provider.tsx'
 
 /**
  * @type {import('@storybook/addons').BaseAnnotations}
  */
 const baseAnnotations = {
   decorators: [
     (Story) => (
-      <Provider store={getStore(undefined)}>
-        <I18nextProvider i18n={i18n} >
-          <DndProvider backend={DndBackend}>
-            <HeliaProvider>
-              <ExploreProvider>
-                <Story />
-              </ExploreProvider>
-            </HeliaProvider>
-          </DndProvider>
-        </I18nextProvider>
-      </Provider>
+      <ThemeProvider>
+        <Provider store={getStore(undefined)}>
+          <I18nextProvider i18n={i18n} >
+            <DndProvider backend={DndBackend}>
+              <HeliaProvider>
+                <ExploreProvider>
+                  <Story />
+                </ExploreProvider>
+              </HeliaProvider>
+            </DndProvider>
+          </I18nextProvider>
+        </Provider>
+      </ThemeProvider>
     )
   ],
   /**

src/App.js

@@ -18,6 +18,8 @@ import Notify from './components/notify/Notify.js'
 import Connected from './components/connected/Connected.js'
 import TourHelper from './components/tour/TourHelper.js'
 import FilesExploreForm from './files/explore-form/files-explore-form.tsx'
+import { ThemeProvider, ThemeContext } from './context/theme-provider.tsx'
+import { ThemeToggle } from './components/theme-toggle/toggle.tsx'
 
 export class App extends Component {
   static propTypes = {
@@ -32,6 +34,8 @@ export class App extends Component {
     isOver: PropTypes.bool.isRequired
   }
 
+  static contextType = ThemeContext
+
   constructor (props) {
     super(props)
     props.doSetupLocalStorage()
@@ -63,44 +67,49 @@ export class App extends Component {
   render () {
     const { t, route: Page, ipfsReady, doFilesNavigateTo, routeInfo: { url }, connectDropTarget, canDrop, isOver, showTooltip } = this.props
     return connectDropTarget(
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div className='sans-serif h-100 relative' onClick={getNavHelper(this.props.doUpdateUrl)}>
-        {/* Tinted overlay that appears when dragging and dropping an item */}
-        { canDrop && isOver && <div className='h-100 top-0 right-0 fixed appOverlay' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
-        <div className='flex flex-row-reverse-l flex-column-reverse justify-end justify-start-l' style={{ minHeight: '100vh' }}>
-          <div className='flex-auto-l'>
-            <div className='flex items-center ph3 ph4-l' style={{ WebkitAppRegion: 'drag', height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>
-              <div className='joyride-app-explore' style={{ width: 560 }}>
-                <FilesExploreForm onBrowse={doFilesNavigateTo} />
+      <div>
+        <ThemeProvider>
+          {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+          <div className='sans-serif h-100 relative' onClick={getNavHelper(this.props.doUpdateUrl)}>
+            {/* Tinted overlay that appears when dragging and dropping an item */}
+            { canDrop && isOver && <div className='h-100 top-0 right-0 fixed appOverlay' style={{ background: 'rgba(99, 202, 210, 0.2)' }} /> }
+            <div className='flex flex-row-reverse-l flex-column-reverse justify-end justify-start-l' style={{ minHeight: '100vh' }}>
+              <div className='flex-auto-l'>
+                <div className='flex items-center ph3 ph4-l webui-header' style={{ WebkitAppRegion: 'drag', height: 75, background: '#F0F6FA', paddingTop: '20px', paddingBottom: '15px' }}>
+                  <div className='joyride-app-explore' style={{ width: 560 }}>
+                    <FilesExploreForm onBrowse={doFilesNavigateTo} />
+                  </div>
+                  <div className='dn flex-ns flex-auto items-center justify-end'>
+                    <TourHelper />
+                    <Connected className='joyride-app-status' />
+                    <div className='pa3'>
+                      <ThemeToggle />
+                    </div>
+                  </div>
+                </div>
+                <main className='bg-white pv3 pa3 pa4-l'>
+                  { (ipfsReady || url === '/welcome' || url.startsWith('/settings'))
+                    ? <Page />
+                    : <ComponentLoader />
+                  }
+                </main>
               </div>
-              <div className='dn flex-ns flex-auto items-center justify-end'>
-                <TourHelper />
-                <Connected className='joyride-app-status' />
+              <div className='navbar-container flex-none-l bg-navy'>
+                <NavBar />
               </div>
             </div>
-            <main className='bg-white pv3 pa3 pa4-l'>
-              { (ipfsReady || url === '/welcome' || url.startsWith('/settings'))
-                ? <Page />
-                : <ComponentLoader />
-              }
-            </main>
-          </div>
-          <div className='navbar-container flex-none-l bg-navy'>
-            <NavBar />
+            <ReactJoyride
+              run={showTooltip}
+              steps={appTour.getSteps({ t })}
+              styles={appTour.styles}
+              callback={this.handleJoyrideCb}
+              scrollToFirstStep
+              disableOverlay
+              locale={getJoyrideLocales(t)}
+            />
+            <Notify />
           </div>
-        </div>
-
-        <ReactJoyride
-          run={showTooltip}
-          steps={appTour.getSteps({ t })}
-          styles={appTour.styles}
-          callback={this.handleJoyrideCb}
-          scrollToFirstStep
-          disableOverlay
-          locale={getJoyrideLocales(t)}
-        />
-
-        <Notify />
+        </ThemeProvider>
       </div>
     )
   }

src/components/api-address-form/ApiAddressForm.js

@@ -3,12 +3,14 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 import Button from '../button/button.tsx'
 import { checkValidAPIAddress } from '../../bundles/ipfs-provider.js'
+import { useTheme } from '../../hooks/theme'
 
 const ApiAddressForm = ({ t, doUpdateIpfsApiAddress, ipfsApiAddress, ipfsInitFailed }) => {
   const [value, setValue] = useState(asAPIString(ipfsApiAddress))
   const initialIsValidApiAddress = !checkValidAPIAddress(value)
   const [showFailState, setShowFailState] = useState(initialIsValidApiAddress || ipfsInitFailed)
   const [isValidApiAddress, setIsValidApiAddress] = useState(initialIsValidApiAddress)
+  const { isDarkTheme } = useTheme()
 
   // Updates the border of the input to indicate validity
   useEffect(() => {
@@ -46,12 +48,14 @@ const ApiAddressForm = ({ t, doUpdateIpfsApiAddress, ipfsApiAddress, ipfsInitFai
         onChange={onChange}
         onKeyPress={onKeyPress}
         value={value}
+        style={{ background: isDarkTheme ? 'var(--filter-peers-dark)' : '', border: isDarkTheme ? '0.4px solid var(--border-color)' : '' }}
       />
       <div className='tr'>
         <Button
           minWidth={100}
           height={40}
           className='mt2 mt0-l ml2-l tc'
+          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           disabled={!isValidApiAddress || value === ipfsApiAddress}>
           {t('actions.submit')}
         </Button>

src/components/box/Box.js

@@ -1,14 +1,17 @@
 import React from 'react'
+import { useTheme } from '../../hooks/theme'
 import ErrorBoundary from '../error/ErrorBoundary.js'
 
 export const Box = ({
   className = 'pa4',
   style,
+  themed,
   children,
   ...props
 }) => {
+  const { isDarkTheme } = useTheme()
   return (
-    <section className={className} style={{ background: '#fbfbfb', ...style }}>
+    <section className={className} style={{ background: isDarkTheme ? 'var(--element-bg)' : 'var(--element-bg-light)', ...style }}>
       <ErrorBoundary>
         {children}
       </ErrorBoundary>

src/components/public-gateway-form/PublicGatewayForm.js

@@ -3,13 +3,14 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 import Button from '../button/button.tsx'
 import { checkValidHttpUrl, checkViaImgSrc, DEFAULT_PATH_GATEWAY } from '../../bundles/gateway.js'
+import { useTheme } from '../../hooks/theme'
 
 const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
   const [value, setValue] = useState(publicGateway)
   const initialIsValidGatewayUrl = !checkValidHttpUrl(value)
   const [showFailState, setShowFailState] = useState(initialIsValidGatewayUrl)
   const [isValidGatewayUrl, setIsValidGatewayUrl] = useState(initialIsValidGatewayUrl)
-
+  const { isDarkTheme } = useTheme()
   // Updates the border of the input to indicate validity
   useEffect(() => {
     setShowFailState(!isValidGatewayUrl)
@@ -60,6 +61,7 @@ const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
         onChange={onChange}
         onKeyPress={onKeyPress}
         value={value}
+        style={{ background: isDarkTheme ? 'var(--filter-peers-dark)' : '', border: isDarkTheme ? '0.4px solid var(--border-color)' : '' }}
       />
       <div className='tr'>
         <Button
@@ -68,6 +70,7 @@ const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
           height={40}
           bg='bg-charcoal'
           className='tc'
+          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           disabled={value === DEFAULT_PATH_GATEWAY}
           onClick={onReset}>
           {t('app:actions.reset')}
@@ -77,6 +80,7 @@ const PublicGatewayForm = ({ t, doUpdatePublicGateway, publicGateway }) => {
           minWidth={100}
           height={40}
           className='mt2 mt0-l ml2-l tc'
+          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           disabled={!isValidGatewayUrl || value === publicGateway}>
           {t('actions.submit')}
         </Button>

src/components/public-subdomain-gateway-form/PublicSubdomainGatewayForm.js

@@ -3,11 +3,13 @@ import { connect } from 'redux-bundler-react'
 import { withTranslation } from 'react-i18next'
 import Button from '../button/button.tsx'
 import { checkValidHttpUrl, checkSubdomainGateway, DEFAULT_SUBDOMAIN_GATEWAY } from '../../bundles/gateway.js'
+import { useTheme } from '../../hooks/theme'
 
 const PublicSubdomainGatewayForm = ({ t, doUpdatePublicSubdomainGateway, publicSubdomainGateway }) => {
   const [value, setValue] = useState(publicSubdomainGateway)
   const initialIsValidGatewayUrl = !checkValidHttpUrl(value)
   const [isValidGatewayUrl, setIsValidGatewayUrl] = useState(initialIsValidGatewayUrl)
+  const { isDarkTheme } = useTheme()
 
   // Updates the border of the input to indicate validity
   useEffect(() => {
@@ -64,6 +66,7 @@ const PublicSubdomainGatewayForm = ({ t, doUpdatePublicSubdomainGateway, publicS
         onChange={onChange}
         onKeyPress={onKeyPress}
         value={value}
+        style={{ background: isDarkTheme ? 'var(--filter-peers-dark)' : '', border: isDarkTheme ? '0.4px solid var(--border-color)' : '' }}
       />
       <div className='tr'>
         <Button
@@ -72,6 +75,7 @@ const PublicSubdomainGatewayForm = ({ t, doUpdatePublicSubdomainGateway, publicS
           height={40}
           bg='bg-charcoal'
           className='tc'
+          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           disabled={value === DEFAULT_SUBDOMAIN_GATEWAY}
           onClick={onReset}>
           {t('app:actions.reset')}
@@ -80,6 +84,7 @@ const PublicSubdomainGatewayForm = ({ t, doUpdatePublicSubdomainGateway, publicS
           id='public-subdomain-gateway-submit-button'
           minWidth={100}
           height={40}
+          style={{ background: isDarkTheme ? 'var(--input-btn-bg)' : '' }}
           className='mt2 mt0-l ml2-l tc'
           disabled={!isValidGatewayUrl || value === publicSubdomainGateway}>
           {t('actions.submit')}

src/components/theme-toggle/theme-toggle.css

@@ -0,0 +1,53 @@
+.theme-toggle {
+  --size: 1.55rem;
+  --icon-fill: hsl(210, 22%, 22%);
+  --icon-fill-hover: hsl(210, 22%, 12%);
+
+  background: none;
+  border: none;
+  padding: 0;
+  inline-size: var(--size);
+  block-size: var(--size);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  outline-offset: 5px;
+}
+
+.theme-toggle > svg {
+  inline-size: 100%;
+  block-size: 100%;
+  stroke-linecap: round;
+  color: #378085;
+}
+
+[data-theme='dark'] .theme-toggle {
+  --icon-fill: hsl(25, 100%, 50%);
+  --icon-fill-hover: hsl(25, 100%, 40%);
+
+  svg {
+    color: #fff;
+  }
+}
+
+.theme-toggle:hover,
+.theme-toggle:focus-visible {
+  background: hsl(0 0% 50% / 0.1);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .theme-toggle {
+    transition: background-color 0.3s ease;
+  }
+
+  .theme-toggle > svg {
+    transition: transform 0.5s ease;
+  }
+
+  .theme-toggle:hover > svg,
+  .theme-toggle:focus-visible > svg {
+    transform: scale(1.1);
+  }
+}

src/components/theme-toggle/toggle.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import './theme-toggle.css'
+import { useTheme } from '../../hooks/theme'
+
+export const ThemeToggle = () => {
+  const { isDarkTheme, toggleTheme } = useTheme()
+  return (
+    <button
+      className="theme-toggle"
+      onClick={() => toggleTheme()}
+      onKeyDown={toggleTheme}
+      tabIndex={0}
+      aria-label={`Toggle ${isDarkTheme ? 'dark' : 'light'} mode`}
+      role="switch"
+      aria-checked={isDarkTheme}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        aria-hidden="true"
+        color="#fff"
+      >
+        {isDarkTheme
+          ? (
+            <>
+              <circle cx="12" cy="12" r="5" />
+              <line x1="12" y1="1" x2="12" y2="3" />
+              <line x1="12" y1="21" x2="12" y2="23" />
+              <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+              <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+              <line x1="1" y1="12" x2="3" y2="12" />
+              <line x1="21" y1="12" x2="23" y2="12" />
+              <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+              <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+            </>
+            )
+          : (
+            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            )}
+      </svg>
+    </button>
+  )
+}