Global Styles

Overview

Global styles are styles that are applied to the entire application.

The styles defined in the theme are here.

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",
  },
})

Customize

• 1

  Generate a Theme

  Use the CLI to generate a theme.

  Before running the following commands, you need to install @yamada-ui/cli and execute the init command. For more details, please see here.

  pnpmnpmyarnbun

  pnpm yamada-cli theme
  

• 2

  Change the Style

  Change the styles/global-style.ts in the generated theme.

  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

  Update the Provider

  Set the generated theme to UIProvider.

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