カスタマイズ
Yamada UIのテーマをカスタマイズする方法を学ぶ。
セットアップ
- 1
- 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",
},
...
})