@charcoal-ui/styled クイックスタート

インストール

npm

npm install @charcoal-ui/styled

yarn

yarn add @charcoal-ui/styled

使い方

ThemeProviderTokenInjectorを使用してください。

import { FC, ReactNode } from 'react'
import { light, dark } from '@charcoal-ui/theme'
import { TokenInjector, useTheme, useThemeSetter, themeSelector, prefersColorScheme } from '@charcoal-ui/styled'

const ExampleProvider: FC<{ children: ReactNode }> = ({ children }) => {
  const [theme] = useTheme()
  useThemeSetter()
  return (
    <ThemeProvider theme={theme === 'dark' ? dark : light}>
      <TokenInjector
        theme={{
          ':root': light,
          [themeSelector('light')]: light,
          [themeSelector('dark')]: dark,
          [prefersColorScheme('dark')]: dark,
        }}
        background="background1"
      />
      {children}
    </ThemeProvider>
  )
}