カスタマイズ

Yamada UIのテーマをカスタマイズする方法を学ぶ。

セットアップ

  • 1

    テーマを生成する

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

    pnpm yamada-cli theme
  • 2

    プロバイダーを更新する

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

    import { UIProvider } from "@workspaces/ui"
import { theme } from "@workspace/theme"

const App = () => {
  return (
    <UIProvider theme={theme}>
      <YourApplication />
    </UIProvider>
  )
}

カラースキームを変更する

プロジェクト全体で適用されるカラースキームを変更する場合は、styles/global-style.tsを変更します。

theme/styles/global-style.ts

import { defineStyles } from "@yamada-ui/react"

export const globalStyle = defineStyles.globalStyle({
  "*, *::before, *::after": {
    borderColor: "border",
    borderStyle: "solid",
    borderWidth: "0",
    focusVisibleRing: "outline",
    fontFeatureSettings: '"cv11"',
    overflowWrap: "break-word",
  },
  "*::placeholder, *[data-placeholder]": {
    color: "fg.subtle",
  },
  body: {
    colorScheme: "blue", 
    bg: "bg",
    color: "fg",
    fontFamily: "body",
    lineHeight: "moderate",
    overflowX: "hidden",
    transitionDuration: "moderate",
    transitionProperty: "background-color",
  },
})

カラースキームを追加する

プロジェクトで使用するカラースキームを追加する場合は、semantic-tokens/color-schemes.tsを変更します。

theme/semantic-tokens/color-schemes.ts

import { defineSemanticTokens } from "@yamada-ui/react"

export const colorSchemes = defineSemanticTokens.colorSchemes({
  accent: "cyan", 
  danger: "red",
  error: "red",
  info: "blue",
  link: "blue",
  mono: ["black", "white"],
  primary: ["black", "white"],
  secondary: "gray",
  success: "green",
  warning: "orange",
})

アプリケーションの背景色を変更する

アプリケーションの背景色を変更する場合は、semantic-tokens/colors.tsを変更します。

theme/semantic-tokens/colors.ts

import { defineSemanticTokens } from "@yamada-ui/react"

export const colors = defineSemanticTokens.colors({
  ...
  black: {
    base: "#000000", 
    bg: "#f8f8f8",
    contrast: "white",
    emphasized: "black.200",
    fg: "black.800",
    ghost: "black.100/50",
    muted: "black.100",
    outline: "black.900",
    solid: "black",
    subtle: "black.50",
  },
  white: {
    base: "#fafafa", 
    bg: "#161616",
    contrast: "black",
    emphasized: "white.400/50",
    fg: "white.900",
    ghost: "white.200/50",
    muted: "white.300/50",
    outline: "white.800",
    solid: "white",
    subtle: "white.200/50",
  },
  ...
})