From 5072d38a8edbc4516f46f70559d06afcd9def3a1 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sun, 5 Apr 2020 04:41:52 +0800
Subject: [PATCH 1/2] docs(colors): update colors when themes change

---
 lib/components/displays/colors-data.ts | 4 ++--
 lib/components/displays/colors.tsx     | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/lib/components/displays/colors-data.ts b/lib/components/displays/colors-data.ts
index eb3651c..7f4ee0b 100644
--- a/lib/components/displays/colors-data.ts
+++ b/lib/components/displays/colors-data.ts
@@ -64,8 +64,8 @@ export const getCurrentColor = (palette: ZeitUIThemesPalette, type: string, inde
   }
   
   if (type === 'highlight') {
-    if (index < 3) return palette.background
-    return palette.foreground
+    if (index < 3) return 'white'
+    return 'black'
   }
   
   return palette.background
diff --git a/lib/components/displays/colors.tsx b/lib/components/displays/colors.tsx
index 78b0b52..b278850 100644
--- a/lib/components/displays/colors.tsx
+++ b/lib/components/displays/colors.tsx
@@ -39,7 +39,10 @@ const Colors: React.FC<Props> = ({
     copy(text)
     setToast(({ text: <span>Copied <Code>{text}</Code></span> }))
   }
-  const colorItems = useMemo(() => getColorItem(type, theme.palette, copyText), [])
+  const colorItems = useMemo(
+    () => getColorItem(type, theme.palette, copyText),
+    [type, theme.palette],
+  )
   
   return (
     <div className="colors">

From ff3f1a32b3981c79fb8655b1b231e7ef45b0f845 Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sun, 5 Apr 2020 04:53:44 +0800
Subject: [PATCH 2/2] docs(themes): show all types of theme definitions

---
 pages/en-us/customization/themes.mdx | 25 ++++++++++++++++++++++++-
 pages/zh-cn/customization/themes.mdx | 24 +++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/pages/en-us/customization/themes.mdx b/pages/en-us/customization/themes.mdx
index 556d7d9..6709250 100644
--- a/pages/en-us/customization/themes.mdx
+++ b/pages/en-us/customization/themes.mdx
@@ -1,5 +1,5 @@
 import Layout from 'lib/components/layout'
-import { Note, Code, Spacer } from 'components'
+import { Note, Code, Spacer, Link } from 'components'
 
 export const meta = {
   title: 'Themes',
@@ -72,6 +72,29 @@ const App = () => (
 )
 ```
 
+<Spacer y={3} />
+
+### View all types of Theme definitions
+
+If you are using TypeScript, you can import various preset types:
+
+```ts
+import {
+  ZeitUIThemes,
+  ZeitUIThemesFont,
+  ZeitUIThemesPalette,
+  ZeitUIThemesExpressiveness,
+  ZeitUIThemesLayout,
+} from '@zeit-ui/react'
+
+// usage:
+const myStyles: ZeitUIThemes = { /* ... */ }
+const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
+```
+
+If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">here</Link>.
+
+
 <Spacer y={3} />
 
 ### Customizing components
diff --git a/pages/zh-cn/customization/themes.mdx b/pages/zh-cn/customization/themes.mdx
index 1d03d52..b3929f9 100644
--- a/pages/zh-cn/customization/themes.mdx
+++ b/pages/zh-cn/customization/themes.mdx
@@ -1,5 +1,5 @@
 import Layout from 'lib/components/layout'
-import { Note, Code, Spacer } from 'components'
+import { Note, Code, Spacer, Link } from 'components'
 
 export const meta = {
   title: '主题',
@@ -74,6 +74,28 @@ const App = () => (
 
 <Spacer y={3} />
 
+### 查看主题定义的所有类型
+
+如果你正在使用 TypeScript，可以选择引入各类预置的类型：
+
+```ts
+import {
+  ZeitUIThemes,
+  ZeitUIThemesFont,
+  ZeitUIThemesPalette,
+  ZeitUIThemesExpressiveness,
+  ZeitUIThemesLayout,
+} from '@zeit-ui/react'
+
+// 使用示例
+const myStyles: ZeitUIThemes = { /* ... */ }
+const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
+```
+
+如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。
+
+<Spacer y={3} />
+
 ### 定制化组件
 
 #### 通过 `className` 重写样式