import { Code, Display } from 'components'
import { Layout, Colors } from 'lib/components'

export const meta = {
  title: '色彩',
  group: '定制化',
  index: 5,
}

## 色彩

默认的色彩展示。

### 主要的

你可以在自己的应用中使用这些色彩，所有的色彩值都会跟随主题而变化。
想要自定义一些颜色？请阅读 [use-theme](/zh-cn/hooks/use-theme) 文档了解更多的细节。

<Display width="90%" caption={<span>从 <Code>useTheme</Code> 函数中获取调色板。</span>}>

```jsx
import { useTheme } from '@geist-ui/core'

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

  return <p style={{ color: palette.accents_1 }}>myComponent</p>
}
```

</Display>
<Colors type="normal" />

### 状态

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

### 成功

<Colors type="success" />

### 错误

<Colors type="error" />

### 警告

<Colors type="warning" />

### 高亮

<Colors type="highlight" />

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
