Allow for simple switching between light and dark modes

[schne324]

completely open to feedback but here are our initial thoughts...

Create a generic <CauldronProvider /> which accepts a theme prop ("light" or "dark"). Under-the-hood this will actually instantiate a <ThemeProvider /> and pass the theme prop through. This leaves us open to future enhancements that could benefit from a provider-like state. Consumers can still directly use <ThemeProvider /> if they want.

Prior art

• https://github.com/chakra-ui/chakra-ui/blob/cb027c13b52059779931cf1874c496ae8253ef11/packages/react/src/chakra-provider.tsx

[scurker]

We still need to decide how we want components to utilize the theme.

The way we currently do this in extension is components use cascading based on a theme-dark class on the body. We probably don't want something so generic as that could conflict with consumer things so we may want a more specific name along with allowing it to be customized.

Some example code as follows:

const ThemeProvider = function({
  children,
  context = document.body,
  initialTheme = 'light',
  themeClasses = {
    light: 'cauldron--theme-light',
    dark: 'cauldron--theme-dark'
  }
}) {
  const [theme, setTheme] = useState(initialTheme)
  const getThemeFromContext = () => 
    context.classList.contains(classes.dark) 
      ? 'dark'
      : 'light' 
  const toggleTheme = () => 
    setTheme(
      getThemeFromContext() === 'dark' ? 'light' : 'dark'
    )

  useEffect(() => {
    context.classList.toggle(classes.light, theme === 'light')
    context.classList.toggle(classes.dark, theme === 'dark')
  }, [context, theme])

  // Use a MutationObserver to track changes to the classes outside of the context of React
  const handleMutation = mutationList => {
    for (const mutation of mutationList) {
      if (
        mutation.type === 'attributes' &&
        mutation.attributeName === 'class'
      ) {
        setTheme(getThemeFromContext())
      }
    }
  }

  useEffect(() => {
    const observer = new MutationObserver(handleMutation)
    observer.observe(context, {
      childList: false,
      subtree: false,
      attributes: true
    })

    setTheme(getThemeFromContext())

    return () => observer.disconnect()
  }, [context])

  return (
    <ThemeContext.Provider
      value={{
        theme,
        toggleTheme
      }}
    >
      {children}
    </ThemeContext.Provider>
  )
}