Global Styles

Global Style is a component that reflects the style defined in the theme's styles.globalStyle.

The Global Style component is included in UIProvider.

The actual defined values are as follows.

global-style.ts

export const globalStyle: UIStyle = {
  body: {
    fontFamily: "body",
    bg: ["white", "black"],
    color: ["black", "white"],
    transitionProperty: "background-color",
    transitionDuration: "normal",
    lineHeight: "base",
    overflowX: "hidden",
  },
  "*::placeholder": {
    color: "gray.500",
  },
  _dark: {
    "*::placeholder": {
      color: "whiteAlpha.400",
    },
  },
  "*, *::before, &::after": {
    borderWidth: "0",
    borderStyle: "solid",
    borderColor: "border",
    wordWrap: "break-word",
  },
}

Copied!

Customize Global Styles

You can customize global styles simply by changing the styles.globalStyle of the theme.

styles.globalStyle can define a style object or a function that returns a style object.

import { UIProvider, extendTheme, UIStyle } from "@yamada-ui/react"

const globalStyle: UIStyle = {
  body: {
    bg: "red.600",
    color: "white",
  },
}

const customTheme = extendTheme({ styles: { globalStyle } })()

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

Copied!

In the case of a function, you can get theme and colorMode.

import { UIProvider, extendTheme, UIStyle } from "@yamada-ui/react"

const globalStyle: UIStyle = ({ theme, colorMode }) => ({
  body: {
    bg: "red.600",
    color: "white",
  },
})

const customTheme = extendTheme({ styles: { globalStyle } })()

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

Copied!

If you want to learn more about themes, please check Customize Theme and Component Styles.

Adding Global Styles

If you have chosen Individually or Minimal during installation and installed @yamada-ui/core, the global style components are not being called.

If you want to use global styles, you need to do the following three things:

Add ThemeProvider to the root of your application.
Add GlobalStyle.
Define global styles and pass them to theme of ThemeProvider.

import { ThemeProvider, GlobalStyle } from "@yamada-ui/core"

const globalStyle: UIStyle = {
  body: {
    bg: ["white", "black"],
    color: ["black", "white"],
  },
}

const App = () => {
  return (
    <ThemeProvider theme={{ styles: { globalStyle } }}>
      <GlobalStyle />

      <YourApplication />
    </ThemeProvider>
  )
}

Copied!

If you want to use the global styles of the Default Theme, install @yamada-ui/theme and pass defaultTheme or baseTheme to ThemeProvider.

pnpm add @yamada-ui/theme

Copied!

import { ThemeProvider, GlobalStyle } from "@yamada-ui/core"
import { defaultTheme, baseTheme } from "@yamada-ui/theme"

const App = () => {
  return (
    // `defaultTheme` or `baseTheme`
    <ThemeProvider theme={baseTheme}>
      <GlobalStyle />

      <YourApplication />
    </ThemeProvider>
  )
}

Copied!

defaultTheme has all tokens defined, including component styles.
baseTheme has tokens such as global styles and colors defined, but does not have component styles defined.

Edit this page on GitHub

PreviousInterpolation NextReset Styles