For CSS-in-JS (with tree-shaking):
- import all colors in light and dark modes
- import scales in light and dark modes
- import tokens in light and dark modes
- make sure the integration with Stitches is as smooth as possible
import all colors in light and dark modes
import { colors, darkColors } from '@radix-ui/colors'
// colors
{
blue100: '',
red100: '',
gray100: '',
}
// darkColors
{
blue100: '',
red100: '',
gray100: '',
}
// With Stitches
createCss({
theme: {
colors: colors
}
})
theme({
colors: darkColors
})
import scales in light and dark modes
import { blueScale, darkBlueScale } from '@radix-ui/colors'
// blueScale
{
blue100: '',
blue200: '',
blue300: '',
}
// darkBlueScale
{
blue100: '',
blue200: '',
blue300: '',
}
// With Stitches
createCss({
theme: {
colors: blueScale
}
})
theme({
colors: darkBlueScale
})
import tokens in light and dark modes
import { blue200, darkBlue200 } from '@radix-ui/colors'
// blue200
{
blue200: ''
}
// darkBlue200
{
blue200: ''
}
// With Stitches
createCss({
theme: {
colors: blue200
}
})
theme({
colors: darkBlue200
})