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

インストール

npm

npm install --save-dev @charcoal-ui/theme

yarn

yarn add -D @charcoal-ui/theme

概要

@charcoal-ui/themeは、全体で使われるテーマ型と、デフォルトのライト・ダークテーマを提供します。

使い方

styled-componentsと合わせて使用できます。

デフォルトのテーマとして提供しているlight、darkをそのまま使うこともできます。

  import { light, dark } from '@charcoal-ui/theme'
  import { ThemeProvider } from 'styled-components'
  import { FC, ReactNode } from 'react'

  const LightExample: FC<{ children: ReactNode }> = ({ children }) => (
    <ThemeProvider theme={light}>
      {children}
    </ThemeProvider>
  )

  const DarkExample: FC<{ children: ReactNode }> = ({ children }) => (
    <ThemeProvider theme={dark}>
      {children}
    </ThemeProvider>
  )