NextJS Dark Theme

_app.js

import React, { useState, useEffect } from 'react'
import useDarkMode from 'use-dark-mode'
import { ThemeProvider } from 'styled-components'
import { lightTheme, darkTheme } from '../theme'

const MyApp = ({ Component, pageProps }) => {
  const [isMounted, setIsMounted] = useState(false)
  const darkMode = useDarkMode(true)
  const theme = darkMode.value ? darkTheme : lightTheme

  useEffect(() => {
    setIsMounted(true)
  }, [])

  return (
    <ThemeProvider theme={theme}>
      <button onClick={darkMode.enable}>DARK MODE</button>
      <button onClick={darkMode.disable}>LIGHT MODE</button>
      {isMounted && <Component {...pageProps} />}
    </ThemeProvider>
  )
}

export default MyApp

Button.js

import styled from 'styled-components'

const Button = styled.button`
  background: ${props => props.theme.bg.primary};
  color: ${props => props.theme.fontColor};
`

Button.defaultProps = {
  theme: {
    bg: 'white',
    fontColor: 'black'
  }
}

export default Button

index.js

import React from 'react'
import Button from '../components/Button'

const Home = () => {
  return <Button>Theme Test</Button>
}

export default Home

theme.js

const light = {
  bg: {
    primary: 'white'
  },
  fontColor: 'black'
}

const dark = {
  bg: {
    primary: 'black'
  },
  fontColor: 'white'
}

export const darkTheme = { ...dark }
export const lightTheme = { ...light }