色彩

默认的色彩展示。

主要的

你可以在自己的应用中使用这些色彩,所有的色彩值都会跟随主题而变化。 想要自定义一些颜色?请阅读 主题 了解更多的细节。

import { useTheme } from '@cfxjs/react-ui'

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

  return <p style={{ color: palette.accents_1 }}>myComponent</p>
}
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
#999

Accent 4

theme.palette.accents_4
#888

Accent 5

theme.palette.accents_5
#666

Accent 6

theme.palette.accents_6
#444

Accent 7

theme.palette.accents_7
#333

Accent 8

theme.palette.accents_8
#111

Foreground

theme.palette.foreground
#000

状态

使用不同的颜色表达情感的变化。

成功

Light

theme.palette.successLight
#effaef

Default

theme.palette.success
#7cd77b

Dark

theme.palette.successDark
#61be75

错误

Light

theme.palette.errorLight
#fbebeb

Default

theme.palette.error
#e15c56

Dark

theme.palette.errorDark
#b34a50

警告

Light

theme.palette.warningLight
#fef1ea

Default

theme.palette.warning
#ffc438

Dark

theme.palette.warningDark
#fb7a03

高亮

Alert

theme.palette.alert
#ff0080

Purple

theme.palette.purple
#f81ce5

Violet

theme.palette.magenta
#eb367f