From 06cba32be4ca802c325ae8b608b1a0d4ab63cc7a Mon Sep 17 00:00:00 2001
From: nocategory <12294525+nocategory@users.noreply.github.com>
Date: Sun, 29 Mar 2020 21:42:18 +0100
Subject: [PATCH 1/2] docs: fix switch themes code

---
 pages/docs/customization/themes.mdx | 25 ++++++++++++-------------
 1 file changed, 12 insertions(+), 13 deletions(-)

diff --git a/pages/docs/customization/themes.mdx b/pages/docs/customization/themes.mdx
index 93148a1..e9c7c08 100644
--- a/pages/docs/customization/themes.mdx
+++ b/pages/docs/customization/themes.mdx
@@ -28,21 +28,20 @@ export const meta = {
   3. Update the value of `theme.type`, and the theme of all components will follow automatically.
 
 ```jsx
-import { CSSBaseline, ZEITUIProvider, useTheme } from '@zeit-ui/react'
+import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'
 
-const [type, setType] = useState('light')
-const currentTheme = useTheme()
-const switchThemes = () => () => {
-  const nextTheme = currentTheme.type === 'dark' ? 'light' : 'dark'
-  setType(nextTheme)
+const App = () => {
+  const [themeType, setThemeType] = useState('dark')
+  const switchThemes = () => {
+    setThemeType(themeType === 'dark' ? 'light' : 'dark')
+  }
+  return (
+    <ZEITUIProvider theme={{ type: themeType }}>
+      <CSSBaseline />
+      <YourComponent onClick={switchThemes} />
+    </ZEITUIProvider>
+  )
 }
-
-const App = () => (
-  <ZEITUIProvider theme={{ type }}>
-    <CSSBaseline />
-      <YourAppComponent onClick={switchThemes}/>
-  </ZEITUIProvider>
-)
 ```
 
 <Spacer y={3} />

From 32a854f8c08ed8dfec4fe8ee2dab25c154b04abd Mon Sep 17 00:00:00 2001
From: nocategory <12294525+nocategory@users.noreply.github.com>
Date: Sun, 29 Mar 2020 23:04:49 +0100
Subject: [PATCH 2/2] docs: update setThemeType function

Co-Authored-By: witt <unix.bio@gmail.com>
---
 pages/docs/customization/themes.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/docs/customization/themes.mdx b/pages/docs/customization/themes.mdx
index e9c7c08..556d7d9 100644
--- a/pages/docs/customization/themes.mdx
+++ b/pages/docs/customization/themes.mdx
@@ -33,7 +33,7 @@ import { CSSBaseline, ZEITUIProvider } from '@zeit-ui/react'
 const App = () => {
   const [themeType, setThemeType] = useState('dark')
   const switchThemes = () => {
-    setThemeType(themeType === 'dark' ? 'light' : 'dark')
+    setThemeType(lastThemeType => lastThemeType === 'dark' ? 'light' : 'dark')
   }
   return (
     <ZEITUIProvider theme={{ type: themeType }}>