Global Styles

Theme UI offers a Global component (that wraps Emotion’s) for adding global CSS with theme-based values.

By default (or, unless the useRootStyles configuration optionis disabled), 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 'theme-ui'

export default (props) => (
  <Global
    styles={{
      button: {
        m: 0,
        bg: 'primary',
        color: 'background',
        border: 0,
      },
    }}
  />
)

Edit the page on GitHub

Color Mode Toggles

TypeScript