Add a dark mode

[jletey]

For anyone using this in the future at night, it would be nice to have a dark mode in the desktop app!

[jletey]

@johno Would you want to use a hook for this?

[johno]

I'll need to do a bit of thinking on this, but perhaps we allow users to select a Theme UI theme (and we provide a couple defaults like light/dark/etc) and we store the selection in the config. If we go this approach we'd prolly use some sort of useConfig hook which sets local app state and persists to the electron-config.

[jletey]

@jxnblk When I add const [colorMode, setColorMode] = useColorMode() to src/index.js, all of the sudden the app doesn't work

Do you have any idea why this is happening?

You can find my code here on my fork

[jxnblk]

@johnletey The hook needs to be inside the ThemeProvider to work, but I don't see one in src/index.js

[jletey]

@jxnblk The ThemeProvider is in src/layout.js

[jxnblk]

@johnletey right, so it looks like the useColorMode hook is being called outside of the ThemeProvider, right?

[jletey]

That is correct

[jletey]

@jxnblk So, still doesn't work when I have the following in src/layout.js:

import React from 'react'
import { ThemeProvider, ColorMode, useColorMode } from 'theme-ui'
import { theme } from '@blocks/editor'
import desktopTheme from './theme'

const [colorMode, setColorMode] = useColorMode()

export default ({ children }) => (
  <ThemeProvider theme={theme && desktopTheme}>
    <button
      onClick={e => {
        setColorMode(colorMode === 'light' ? 'dark' : 'light')
      }}>
      Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
    </button>
    <ColorMode />
    {children}
  </ThemeProvider>
)

and no other theme code in src/index.js

[jletey]

@jxnblk @johno Still no progress ... any ideas?

[jxnblk]

@johnletey the useContext hook needs to be inside a component that's rendered inside the provider.

E.g.

// header component
import React from 'react'
import { useColorMode } from 'theme-ui'
export default props => {
  const [colorMode, setColorMode] = useColorMode()
  return (
    <header>
      <button
        onClick={e => {
          setColorMode(colorMode === 'light' ? 'dark' : 'light')
        }}>
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
      </button>
    </header>
  )
}

// layout component
const Layout = props =>
  <ThemeProvider theme={theme}>
    <Header />
    {props.children}
  </ThemeProvider>

[jletey]

@jxnblk Thanks for the help ... but still not working ... here's the code:

src/layout.js:

import React from 'react'
import { ThemeProvider } from 'theme-ui'
import ThemeSwitcher from './themeSwitcher';
import theme from './theme'

export default ({ children }) => (
  <ThemeProvider theme={theme}>
    <ThemeSwitcher />
    {children}
  </ThemeProvider>
)

src/themeSwitcher.js:

import React from 'react'
import { useColorMode, Styled } from 'theme-ui'

export default () => {
  const [colorMode, setColorMode] = useColorMode()
  return (
    <Styled.root
      css={{
        maxWidth: '48em',
        padding: 32,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: '40px'
      }}
    >
      <Styled.button
        css={{
          display: 'flex',
          alignItems: 'center',
          cursor: 'pointer'
        }}
        onClick={e => {
          setColorMode(colorMode === 'light' ? 'dark' : 'light')
        }}>
        Toggle {colorMode === 'light' ? 'Dark' : 'Light'}
      </Styled.button>
    </Styled.root>
  )
}

src/theme.js:

import { theme } from '@blocks/editor'

export default {
    ...theme,
    initialColorMode: 'light',
    useCustomProperties: true,
    colors: {
        background: '#fff',
        modes: {
            dark: {
                background: '#000',
            }
        }
    }
}

[jxnblk]

Are you rendering the <ColorMode /> component? The setup is a little more cumbersome without the Gatsby plugin https://theme-ui.com/color-modes#applying-colors