Colors

Default colors for themes.

PRIMARY

You can use any color anywhere, all colors change with the theme. If you want to customize your colors, please read Themes to learn more.

import { useTheme } from '@brudi-hui/react'

const myComponent = () => {
  const { palette } = useTheme()

  return <p style={{ color: palette.accents_1 }}>myComponent</p>
}
Get palette from useTheme.

Background

theme.palette.background
#fff

Accent 1

theme.palette.accents_1
#fafafa

Accent 2

theme.palette.accents_2
#eaeaea

Accent 3

theme.palette.accents_3
#9fa0a1

Accent 4

theme.palette.accents_4
#88898b

Accent 5

theme.palette.accents_5
#6a6c6e

Accent 6

theme.palette.accents_6
#454545

Accent 7

theme.palette.accents_7
#2f2f2f

Accent 8

theme.palette.accents_8
#101820

Foreground

theme.palette.foreground
#101820

STATUS

Use different colors to express more emotional changes.

Success

Lighter

theme.palette.successLighter
#C1E3D4

Light

theme.palette.successLight
#4AA57E

Default

theme.palette.success
#3C8465

Dark

theme.palette.successDark
#2A669A

Error

Lighter

theme.palette.errorLighter
#f7d4d6

Light

theme.palette.errorLight
#ff1a1a

Default

theme.palette.error
#e00

Dark

theme.palette.errorDark
#c50000

Warning

Lighter

theme.palette.warningLighter
#ffefcf

Light

theme.palette.warningLight
#f7b955

Default

theme.palette.warning
#f5a623

Dark

theme.palette.warningDark
#ab570a

Cyan

Lighter

theme.palette.cyanLighter
#aaffec

Light

theme.palette.cyanLight
#79ffe1

Default

theme.palette.cyan
#50e3c2

Dark

theme.palette.cyanDark
#29bc9b

Violet

Lighter

theme.palette.violetLighter
#e3d7fc

Light

theme.palette.violetLight
#8a63d2

Default

theme.palette.violet
#7928ca

Dark

theme.palette.violetDark
#4c2889

Highlight

Alert

theme.palette.alert
#ff0080

Purple

theme.palette.purple
#f81ce5

Violet

theme.palette.magenta
#eb367f