Theme UI

Theme UI combines several libraries together to form a mini-framework for styling applications.

Theme UI is built with:

• Emotion: used to generate isolated CSS with theming context

• MDX: used to provide custom Emotion styled components to MDX documents, without polluting the global CSS scope

• Typography.js: optionally used for creating rich typographic styles with a simple, high-level API

Theme UI includes an optional presets package that can be used as examples or as a starting point for extending your own themes.

npm i theme-ui @theme-ui/presets

Make a file theme.js on the root of your app. To view an example of the built-in presets, see the Demo.

theme.js uses a preset theme "bulma" with some extras:

import { bulma } from '@theme-ui/presets'

const theme = {
  ...bulma,
  containers: {
    card: {
      boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
      border: '1px solid',
      borderColor: 'muted',
      borderRadius: '4px',
      p: 2,
    },
    page: {
      width: '100%',
      maxWidth: '960px',
      m: 0,
      mx: 'auto',
    }
  },
  styles: {
    ...bulma.styles
  }
}

export default theme

import React from 'react'
import {ThemeProvider} from 'theme-ui'
import theme from '../theme'

function App({ Component, pageProps }) {
  return(
    <ThemeProvider theme={theme}> 
    <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default App