import Layout from 'lib/components/layout'
import { Note, Code, Spacer, Link } from 'components'

export const meta = {
  title: '主题',
  group: '定制化',
}

## 主题

`@geist-ui/react` 现在也支持 **暗黑模式**。你可以通过非常简单的 API 随时切换主题，所有的色彩和排版细节都已内置，
不需要任何配置与第三方库。

<Spacer y={2} />

### 切换主题

<Note>
  在使用任何组件前，请确保已添加 <Code>GeistProvider</Code> 至应用的根节点。
</Note>
<Spacer y={0.5} />
<Note type="success">
  <Code>CssBaseline</Code> 提供了基础的 CSS 样式，这和你熟悉的 <Code>normalize</Code> 有些类似。
</Note>
<Spacer y={1} />

**现在你可以根据如下所示步骤切换主题：**

1. 确保 `GeistProvider` 与 `CssBaseline` 已经添加至根节点。

2. (可选的) 通过钩子 `useTheme` 获取所有可用的主题变量。

3. 更新 `theme.type` 的值，所有的组件都会随之自动变化。

```jsx
import { CssBaseline, GeistProvider } from '@geist-ui/react'

const App = () => {
  const [themeType, setThemeType] = useState('dark')
  const switchThemes = () => {
    setThemeType(lastThemeType => (lastThemeType === 'dark' ? 'light' : 'dark'))
  }
  return (
    <GeistProvider theme={{ type: themeType }}>
      <CssBaseline />
      <YourComponent onClick={switchThemes} />
    </GeistProvider>
  )
}
```

<Spacer y={3} />

### 自定义主题

自定义主题样式在 `@geist-ui/react` 中是非常简单的，你只需要提供一个新的样式对象给 `GeistProvider`，所有的组件都会自然变化以适应你自定义的属性。
这里有 <Link target="_blank" color href="https://github.com/geist-org/react/tree/master/examples/custom-themes">一个完整的示例项目</Link> 可供参考。

当然，如果一个组件未使用到你自定义的变量，它不会发生任何变化也不会重新渲染。

<Spacer y={1} />
<Note type="warning">
  自定义越多的主题，就会有越多的 <b>重新渲染</b> 发生。
</Note>

```jsx
import { CssBaseline, GeistProvider } from '@geist-ui/react'

const myTheme = {
  palette: {
    success: '#000',
  },
}

const App = () => (
  <GeistProvider theme={myTheme}>
    <CssBaseline />
    <YourAppComponent onClick={switchThemes} />
  </GeistProvider>
)
```

<Spacer y={3} />

### 查看主题定义的所有类型

如果你正在使用 TypeScript，可以选择引入各类预置的类型：

```ts
import {
  GeistUIThemes,
  GeistUIThemesFont,
  GeistUIThemesPalette,
  GeistUIThemesExpressiveness,
  GeistUIThemesLayout,
} from '@geist-ui/react'

// 使用示例
const myStyles: GeistUIThemes = {
  /* ... */
}
const myPalette: Partial<GeistUIThemesPalette> = {
  /* ... */
}
```

如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" href="https://github.com/geist-org/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。

<Spacer y={3} />

### 定制化组件

#### 通过 `className` 重写样式

你可以通过组件上的 `className` 属性重写当前组件的样式。

```jsx
import { Button, Row } from '@geist-ui/react'

const MyPage = () => (
  <Row>
    <Button className="page-button">Click me!</Button>
  </Row>
)

// in css file:
.page-button {
  padding: 0;
}
```

<Spacer y={2} />

#### 通过行内样式覆盖样式

任何 `inline-style` (行内样式) 都可以在所有组件上正常的工作。

```jsx
const MyPage = () => (
  <Row>
    <Button style={{ margin: '20px' }}>Click me!</Button>
  </Row>
)
```

<Spacer y={2} />

#### 使用预置主题构建自己的组件

有时候你想要创建一些适用于自己的组件，但你想要跟随整个组件库的主体风格或明暗变化。
现在你可以使用 **主题变量** 来完成这件事。

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

const MyComponent = () => {
  const theme = useTheme()
  return (
    <div style={{ color: theme.palette.success }}>
      <span>hello world!</span>
    </div>
  )
}
```

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