🎨

Theme UI

react

Theme spec

theme-ui.com/theme-spec

JSX pragma and the sx prop

https://theme-ui.com/sx-prop

/** @jsx jsx */
import { jsx } from 'theme-ui'

useThemeUI

theme-ui.com/use-theme-ui

import { useThemeUI } from 'theme-ui'
export const MyComponent = () => {
const { theme, colorMode, setColorMode } = useThemeUI()
return <pre>{JSON.stringify(theme, null, 2)}</pre>
}

Using custom theme object values in sx prop

Use the variant key as documented here.

// your theme object
const theme = {
motion: {
defaultTransition: {
transition: 'all 300ms ease-in-out'
}
}
}
// use the `variant` key
const Link = () => <a sx={{ variant: 'motion.defaultTransition' }}>Click me</a>
// could also do this
const Link = () => (
<a sx={{ transition: theme => theme.motion.defaultTransition.transition }}>
Click me
</a>
)

Tips

Object styles

Reference the theme within

{
mx: theme => `-${theme.space[2]}`,
},

Pseudo elements

{
"::before": {
content: '""',
display: 'block',
width: 32,
height: 32,
backgroundColor: 'tomato',
}
}
Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My memory bank.