カラーモード

カスタマイズ

デフォルトでは、カラーモードは"light"が設定されています。もし、"dark"または"system"を使用する場合は、config.defaultColorModeに値を設定します。

• 1

  テーマを生成する

  CLIを使用してテーマを生成します。

  下記のコマンドを実行する前に、@yamada-ui/cliをインストールしてinitコマンドを実行する必要があります。詳しくは、こちらをご覧ください。

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  コンフィグを変更する

  生成したテーマのconfig.tsを変更します。

  theme/config.ts

  import { defineConfig } from "@yamada-ui/react"
  
  export const config = defineConfig({
    css: { varPrefix: "ui" },
    breakpoint: { direction: "down", identifier: "@media screen" },
    defaultColorMode: "dark", 
    defaultThemeScheme: "base",
    notice: { duration: 5000 },
    theme: { responsive: true },
  })
  

• 3

  プロバイダーを更新する

  生成したテーマをUIProviderに設定します。

  import { UIProvider } from "@workspaces/ui"
  import { theme, config } from "@workspace/theme"
  
  const App = () => {
    return (
      <UIProvider theme={theme} config={config}>
        <YourApplication />
      </UIProvider>
    )
  }