Global Styles

Add global styles from your theme.

Use the useRootStyles flag and styles.root key in your theme to set theme-aware styles for any elements.

theme.js
const theme = {
  useRootStyles: true, 
  styles: {
    // Applies to <html />.
    root: {
      m: 0,
      p: 0,

      "*": {
        boxSizing: "border-box",
      },

      // Applies to <body />
      body: {
        fontSize: "sm",
      },
    },
  },
}

useRootStyles: true applies styles.root to html.

useRootStyles: false applies styles.root to body.

Pseudo selectors Color modes