Global Styles

Use the Emotion Global component to add global CSS with theme-based values.

By default, the ThemeUIProvider component will apply styles in theme.styles.root to the <html> element. It will also apply color and background-color styles based on theme.colors.text and theme.colors.background respectively.

import { Global } from '@emotion/react'

export default (props) => (
  <Global
    styles={(theme) => ({
      '*': {
        boxSizing: 'border-box',
      },
    })}
  />
)

Edit the page on GitHub

Color Mode Toggles

TypeScript