Theme Generator

Pick a primary and a secondary color. Bolio UI derives the shades it actually uses, previews them on real components in light and dark, and gives you the code for Themes.createFromLight.

Primary
Secondary
Presets
Shades
0
1Light
2
3Lighter
4
5
6Base
7
8
9Dark
0
1Light
2
3Lighter
4
5
6Base
7
8
9Dark
Variants preview
Light
FilledLightOutlineSubtle
Primary
Secondary
Dark
FilledLightOutlineSubtle
Primary
Secondary
Usage with BolioUIProvider
import { Themes } from '@bolio-ui/core'
const myTheme = Themes.createFromLight({
  type: 'my-theme',
  palette: {
    primary: '#60A5FA',
    primaryLighter: '#B7D7FD',
    primaryLight: '#DFEDFE',
    primaryDark: '#132132',
    secondary: '#A78BFA',
    secondaryLighter: '#D7CBFD',
    secondaryLight: '#EDE8FE',
    secondaryDark: '#211C32'
  }
})