グローバルスタイル

概要

グローバルスタイルは、アプリケーション全体で適用されるスタイルです。

テーマに定義されているスタイルはこちらです。

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: "mono",
    bg: "bg",
    color: "fg",
    fontFamily: "body",
    lineHeight: "moderate",
    overflowX: "hidden",
    transitionDuration: "moderate",
    transitionProperty: "background-color",
  },
})

カスタマイズ

• 1

  テーマを生成する

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

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

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  スタイルを変更する

  生成したテーマの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",
    },
  })
  

• 3

  プロバイダーを更新する

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

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