[styled-components]theme

Theme.tsx

import { createContext, useContext, useState } from 'react'
import { ThemeProvider as StyledThemeProvider } from 'styled-components'

const ThemeContext = createContext({
  setColor: (_: string) => {}
})

export const ThemeProvider: React.FC = ({ children }) => {
  // デフォルト値としてblueを指定
  const [color, setColor] = useState('blue')

  return (
    // スタイルを上書きするsetterをvalueにわたす
    <ThemeContext.Provider value={{ setColor }}>
      <StyledThemeProvider
        theme={{ color }}
      >
        {children}
      </StyledThemeProvider>
    </ThemeContext.Provider>
  )
}

export const useTheme = () => useContext(ThemeContext)