diff --git a/website/gatsby-browser.js b/website/gatsby-browser.js
index 37947bc8d7..ec42ace55a 100644
--- a/website/gatsby-browser.js
+++ b/website/gatsby-browser.js
@@ -1,13 +1,18 @@
import React from 'react'
-import PageWrapper from './src/components/PageWrapper'
+import { RootWrapper } from './src/components/RootWrapper'
+import { PageWrapper } from './src/components/PageWrapper'
-export const wrapPageElement = ({ element }) => {
- return (
-
- {element}
-
- )
-}
+export const wrapRootElement = ({ element }) => (
+
+ {element}
+
+)
+
+export const wrapPageElement = ({ element }) => (
+
+ {element}
+
+)
export const onServiceWorkerUpdateReady = () => {
const answer = window.confirm([
diff --git a/website/gatsby-ssr.js b/website/gatsby-ssr.js
index 5c8b5bb111..0fe1ad7f75 100644
--- a/website/gatsby-ssr.js
+++ b/website/gatsby-ssr.js
@@ -1,10 +1,15 @@
import React from 'react'
-import PageWrapper from './src/components/PageWrapper'
+import { RootWrapper } from './src/components/RootWrapper'
+import { PageWrapper } from './src/components/PageWrapper'
-export const wrapRootElement = ({ element }) => {
- return (
-
- {element}
-
- )
-}
\ No newline at end of file
+export const wrapRootElement = ({ element }) => (
+
+ {element}
+
+)
+
+export const wrapPageElement = ({ element }) => (
+
+ {element}
+
+)
diff --git a/website/src/components/Highlight.tsx b/website/src/components/Highlight.tsx
index eddb91e7bd..7cab234119 100644
--- a/website/src/components/Highlight.tsx
+++ b/website/src/components/Highlight.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import HighlightBase, { defaultProps, Language } from 'prism-react-renderer'
-import { useTheme } from '../theming/context'
+import { useTheme } from 'styled-components'
interface HighlightProps {
code: string
diff --git a/website/src/components/PageWrapper.tsx b/website/src/components/PageWrapper.tsx
index 492e69e44e..3be3315ce3 100644
--- a/website/src/components/PageWrapper.tsx
+++ b/website/src/components/PageWrapper.tsx
@@ -1,38 +1,16 @@
-import '../styles/index.css'
-import React, { useReducer } from 'react'
-import { ThemeProvider } from 'styled-components'
+import React from 'react'
import { GlobalStyle } from '../theming/GlobalStyle'
-import theme from '../theming/theme'
-import { themeContext } from '../theming/context'
-import { globalDispatchContext, globalStateContext, globalStateReducer } from './state'
-// import useLocalStorage from '../lib/useLocalStorage'
-
-const PageWrapper = ({ children }) => {
- // const [themeId] = useLocalStorage('theme', 'light')
- const [state, dispatch] = useReducer(globalStateReducer, {
- theme: 'light',
- })
- const currentTheme = theme[state.theme]
+export const PageWrapper = ({ children }: { children: any }) => {
const isCapturing =
children.props &&
children.props.location &&
children.props.location.search.indexOf('capture=1') !== -1
return (
-
-
-
-
-
-
- {children}
-
-
-
-
-
+ <>
+
+
{children}
+ >
)
}
-
-export default PageWrapper
diff --git a/website/src/components/RootWrapper.tsx b/website/src/components/RootWrapper.tsx
new file mode 100644
index 0000000000..91cae4c4b1
--- /dev/null
+++ b/website/src/components/RootWrapper.tsx
@@ -0,0 +1,7 @@
+import React, { ReactNode } from 'react'
+import { SwitchableThemeProvider } from '../theming/SwitchableThemeProvider'
+import '../styles/index.css'
+
+export const RootWrapper = ({ children }: { children: ReactNode }) => (
+ {children}
+)
diff --git a/website/src/components/ThemeSelector.tsx b/website/src/components/ThemeSelector.tsx
index 2c414826ff..4eee1ad8d2 100644
--- a/website/src/components/ThemeSelector.tsx
+++ b/website/src/components/ThemeSelector.tsx
@@ -1,27 +1,23 @@
import React, { useCallback, useMemo } from 'react'
-import styled from 'styled-components'
-import { useTheme } from '../theming/context'
-import { useGlobalDispatch, useGlobalState } from './state'
+import styled, { useTheme } from 'styled-components'
+import { useSetTheme } from '../theming/SwitchableThemeProvider'
import { Switch } from './controls/Switch'
-// import useLocalStorage from '../lib/useLocalStorage'
const ThemeSelector = () => {
- // const [themeId, saveThemeId] = useLocalStorage('theme')
- const dispatch = useGlobalDispatch()
- const state = useGlobalState()
+ const theme = useTheme()
+ const themeId = theme.id
+ const setThemeId = useSetTheme()
+
const toggleTheme = useCallback(() => {
- const theme = state.theme === 'light' ? 'dark' : 'light'
- // saveThemeId(theme)
- dispatch({ type: 'setTheme', theme })
- }, [dispatch, state.theme])
+ setThemeId(themeId === 'light' ? 'dark' : 'light')
+ }, [theme, themeId])
+
const setTheme = useCallback(
theme => {
- // saveThemeId(theme)
- dispatch({ type: 'setTheme', theme })
+ setThemeId(theme)
},
- [dispatch]
+ [setThemeId]
)
- const theme = useTheme()
const colors = useMemo(
() => ({
on: theme.colors.cardBackground,
@@ -35,20 +31,20 @@ const ThemeSelector = () => {
setTheme('light')}
>
light
setTheme('dark')}
>
dark
diff --git a/website/src/components/components/ComponentTabs.tsx b/website/src/components/components/ComponentTabs.tsx
index ecd113aacb..c4f81238cc 100644
--- a/website/src/components/components/ComponentTabs.tsx
+++ b/website/src/components/components/ComponentTabs.tsx
@@ -1,7 +1,6 @@
import React, { PropsWithChildren, useState } from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
import media from '../../theming/mediaQueries'
-import { useTheme } from '../../theming/context'
import { Highlight } from '../Highlight'
import { CodeBlock } from '../CodeBlock'
diff --git a/website/src/components/components/ComponentTemplate.tsx b/website/src/components/components/ComponentTemplate.tsx
index 82fd8c5d8e..247f8d49ad 100644
--- a/website/src/components/components/ComponentTemplate.tsx
+++ b/website/src/components/components/ComponentTemplate.tsx
@@ -1,10 +1,10 @@
import React, { useState, useCallback, useMemo } from 'react'
import { IGatsbyImageData } from 'gatsby-plugin-image'
+import { useTheme } from 'styled-components'
import { Theme as NivoTheme } from '@nivo/core'
import { startCase } from 'lodash'
import { Seo } from '../Seo'
import Layout from '../Layout'
-import { useTheme } from '../../theming/context'
import { generateChartCode } from '../../lib/generateChartCode'
import { ComponentPage } from './ComponentPage'
import { ComponentHeader } from './ComponentHeader'
diff --git a/website/src/components/components/api-client/ApiTabs.tsx b/website/src/components/components/api-client/ApiTabs.tsx
index 2281bf86d3..0384675698 100644
--- a/website/src/components/components/api-client/ApiTabs.tsx
+++ b/website/src/components/components/api-client/ApiTabs.tsx
@@ -1,7 +1,6 @@
import React, { useState } from 'react'
-import styled, { keyframes } from 'styled-components'
+import styled, { keyframes, useTheme } from 'styled-components'
import media from '../../../theming/mediaQueries'
-import { useTheme } from '../../../theming/context'
import { CodeBlock } from '../../CodeBlock'
import { ApiPreview } from './ApiPreview'
diff --git a/website/src/components/components/explorer/ComponentsGridItem.tsx b/website/src/components/components/explorer/ComponentsGridItem.tsx
index adb14f80ea..2bd6560d8f 100644
--- a/website/src/components/components/explorer/ComponentsGridItem.tsx
+++ b/website/src/components/components/explorer/ComponentsGridItem.tsx
@@ -1,8 +1,7 @@
import React, { memo } from 'react'
import { Link } from 'gatsby'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
import media from '../../../theming/mediaQueries'
-import { useTheme } from '../../../theming/context'
interface ComponentsGridItemProps {
path: string
diff --git a/website/src/components/controls/OpacityControl.tsx b/website/src/components/controls/OpacityControl.tsx
index 4ca15fa1cc..13fce4099c 100644
--- a/website/src/components/controls/OpacityControl.tsx
+++ b/website/src/components/controls/OpacityControl.tsx
@@ -1,11 +1,9 @@
import React, { useCallback } from 'react'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
import { Control } from './Control'
import { PropertyHeader } from './PropertyHeader'
import { TextInput } from './TextInput'
import { Help } from './Help'
-// @ts-ignore
-import { useTheme } from '../../theming/context'
import { Flavor, ChartProperty } from '../../types'
import { OpacityControlConfig } from './types'
diff --git a/website/src/components/controls/Select.tsx b/website/src/components/controls/Select.tsx
index fba0113c6f..d5c5267f8b 100644
--- a/website/src/components/controls/Select.tsx
+++ b/website/src/components/controls/Select.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import ReactSelect from 'react-select'
-import { useTheme } from '../../theming/context'
+import { useTheme } from 'styled-components'
const Select = props => {
const theme = useTheme()
diff --git a/website/src/components/guides/axes/theme.tsx b/website/src/components/guides/axes/theme.tsx
index 3e5f6ea136..33c48d19d0 100644
--- a/website/src/components/guides/axes/theme.tsx
+++ b/website/src/components/guides/axes/theme.tsx
@@ -1,6 +1,6 @@
import { useMemo } from 'react'
import { Theme } from '@nivo/core'
-import { useTheme } from '../../../theming/context'
+import { useTheme } from 'styled-components'
export const useAxisTheme = (): Theme => {
const theme = useTheme()
diff --git a/website/src/components/guides/colors/ColorsIllustrations.js b/website/src/components/guides/colors/ColorsIllustrations.js
index 80126fdc22..bb7496bcc7 100644
--- a/website/src/components/guides/colors/ColorsIllustrations.js
+++ b/website/src/components/guides/colors/ColorsIllustrations.js
@@ -1,10 +1,10 @@
import React from 'react'
+import { useTheme } from 'styled-components'
import { ResponsiveBar } from '@nivo/bar'
import { ResponsiveStream } from '@nivo/stream'
import { ResponsiveTreeMap } from '@nivo/treemap'
import { generateCountriesData } from '@nivo/generators'
import { FullWidthBanner } from '../../styled'
-import { useTheme } from '../../../theming/context'
const ColorsIllustrations = () => {
const theme = useTheme()
diff --git a/website/src/components/guides/gradients/GradientsIllustrations.js b/website/src/components/guides/gradients/GradientsIllustrations.js
index bab730a558..16c67763f5 100644
--- a/website/src/components/guides/gradients/GradientsIllustrations.js
+++ b/website/src/components/guides/gradients/GradientsIllustrations.js
@@ -1,11 +1,11 @@
import React from 'react'
+import { useTheme } from 'styled-components'
import { linearGradientDef } from '@nivo/core'
import { ResponsiveBar } from '@nivo/bar'
import { ResponsiveStream } from '@nivo/stream'
import { ResponsiveTreeMap } from '@nivo/treemap'
import { generateCountriesData } from '@nivo/generators'
import { FullWidthBanner } from '../../styled'
-import { useTheme } from '../../../theming/context'
const GradientsIllustrations = () => {
const theme = useTheme()
diff --git a/website/src/components/guides/legends/LegendDirection.tsx b/website/src/components/guides/legends/LegendDirection.tsx
index 3dd1956130..e09ae7186e 100644
--- a/website/src/components/guides/legends/LegendDirection.tsx
+++ b/website/src/components/guides/legends/LegendDirection.tsx
@@ -1,6 +1,6 @@
import React from 'react'
+import { useTheme } from 'styled-components'
import { BoxLegendSvg } from '@nivo/legends'
-import { useTheme } from '../../../theming/context'
const legendProps = {
containerWidth: 800,
diff --git a/website/src/components/guides/legends/LegendItemDirection.tsx b/website/src/components/guides/legends/LegendItemDirection.tsx
index fe9ad0bdcf..98cedbb108 100644
--- a/website/src/components/guides/legends/LegendItemDirection.tsx
+++ b/website/src/components/guides/legends/LegendItemDirection.tsx
@@ -1,6 +1,6 @@
import React from 'react'
+import { useTheme } from 'styled-components'
import { LegendSvgItem } from '@nivo/legends'
-import { useTheme } from '../../../theming/context'
const itemDirections = ['left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top'] as const
diff --git a/website/src/components/guides/legends/LegendPosition.tsx b/website/src/components/guides/legends/LegendPosition.tsx
index 0ca946f257..b9a557a212 100644
--- a/website/src/components/guides/legends/LegendPosition.tsx
+++ b/website/src/components/guides/legends/LegendPosition.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import omit from 'lodash/omit'
+import { useTheme } from 'styled-components'
import { BoxLegendSvg } from '@nivo/legends'
-import { useTheme } from '../../../theming/context'
const anchors = [
'top-left',
diff --git a/website/src/components/guides/legends/SymbolShape.tsx b/website/src/components/guides/legends/SymbolShape.tsx
index 4646a3b57e..11b2f1e8d9 100644
--- a/website/src/components/guides/legends/SymbolShape.tsx
+++ b/website/src/components/guides/legends/SymbolShape.tsx
@@ -1,7 +1,7 @@
import React from 'react'
+import { useTheme } from 'styled-components'
import { LegendSvgItem } from '@nivo/legends'
import { Highlight } from '../../Highlight'
-import { useTheme } from '../../../theming/context'
const shapes = ['square', 'circle', 'triangle', 'diamond'] as const
diff --git a/website/src/components/guides/patterns/PatternsIllustrations.tsx b/website/src/components/guides/patterns/PatternsIllustrations.tsx
index 25ad1771e6..262b176455 100644
--- a/website/src/components/guides/patterns/PatternsIllustrations.tsx
+++ b/website/src/components/guides/patterns/PatternsIllustrations.tsx
@@ -1,13 +1,11 @@
import React from 'react'
-// @ts-ignore
+import { useTheme } from 'styled-components'
import { patternDotsDef, patternLinesDef, patternSquaresDef } from '@nivo/core'
import { ResponsiveBar } from '@nivo/bar'
import { ResponsiveStream } from '@nivo/stream'
import { ResponsiveTreeMap } from '@nivo/treemap'
import { generateCountriesData } from '@nivo/generators'
import { FullWidthBanner } from '../../styled'
-// @ts-ignore
-import { useTheme } from '../../../theming/context'
export const PatternsIllustrations = () => {
const theme = useTheme()
diff --git a/website/src/components/home/Home.js b/website/src/components/home/Home.js
index 4c06d90139..c3246389a3 100644
--- a/website/src/components/home/Home.js
+++ b/website/src/components/home/Home.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { useTheme } from '../../theming/context'
+import { useTheme } from 'styled-components'
import { Container, HomeBaseline, HomeLogo } from './styled'
import { HomeChord } from './HomeChord'
import HomeLine from './HomeLine'
diff --git a/website/src/components/nav/MiniNavLink.js b/website/src/components/nav/MiniNavLink.js
index 2f18740986..4878280b50 100644
--- a/website/src/components/nav/MiniNavLink.js
+++ b/website/src/components/nav/MiniNavLink.js
@@ -1,7 +1,6 @@
import React, { memo } from 'react'
import { Link } from 'gatsby'
-import styled from 'styled-components'
-import { useTheme } from '../../theming/context'
+import styled, { useTheme } from 'styled-components'
const Label = styled.span`
position: absolute;
diff --git a/website/src/components/state.js b/website/src/components/state.js
deleted file mode 100644
index 2a99b1e251..0000000000
--- a/website/src/components/state.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { createContext, useContext } from 'react'
-
-export const globalStateContext = createContext()
-export const globalDispatchContext = createContext()
-
-export const useGlobalState = () => useContext(globalStateContext)
-export const useGlobalDispatch = () => useContext(globalDispatchContext)
-
-export const globalStateReducer = (state, action) => {
- switch (action.type) {
- case 'setTheme':
- if (action.theme !== state.theme) {
- return {
- ...state,
- theme: action.theme,
- }
- }
-
- return state
-
- default:
- return state
- }
-}
diff --git a/website/src/pages/guides/legends.tsx b/website/src/pages/guides/legends.tsx
index 94ba606f96..a995280d93 100644
--- a/website/src/pages/guides/legends.tsx
+++ b/website/src/pages/guides/legends.tsx
@@ -1,7 +1,7 @@
import React from 'react'
+import { useTheme } from 'styled-components'
// @ts-ignore
import { themeContext } from '@nivo/core'
-import { useTheme } from '../../theming/context'
import Layout from '../../components/Layout'
import { Seo } from '../../components/Seo'
import PageContent from '../../components/PageContent'
diff --git a/website/src/theming/SwitchableThemeProvider.tsx b/website/src/theming/SwitchableThemeProvider.tsx
new file mode 100644
index 0000000000..4c89a4f6c8
--- /dev/null
+++ b/website/src/theming/SwitchableThemeProvider.tsx
@@ -0,0 +1,37 @@
+import React, { createContext, ReactNode, useContext, useMemo, useState } from 'react'
+import { ThemeProvider } from 'styled-components'
+import themes from './theme'
+
+type ThemeId = keyof typeof themes
+
+interface ThemeIdContextValue {
+ themeId: ThemeId
+ setThemeId: (themeId: ThemeId) => void
+}
+
+const ThemeIdContext = createContext({} as any)
+
+export const useSetTheme = () => {
+ const { setThemeId } = useContext(ThemeIdContext)
+
+ return setThemeId
+}
+
+export const SwitchableThemeProvider = ({ children }: { children: ReactNode }) => {
+ const [themeId, setThemeId] = useState('light')
+ const contextValue = useMemo(
+ () => ({
+ themeId,
+ setThemeId,
+ }),
+ [themeId, setThemeId]
+ )
+
+ const theme = themes[themeId]
+
+ return (
+
+ {children}
+
+ )
+}
diff --git a/website/src/theming/context.tsx b/website/src/theming/context.tsx
deleted file mode 100644
index 7508345f68..0000000000
--- a/website/src/theming/context.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react'
-import { DefaultTheme } from 'styled-components'
-
-export const themeContext = createContext({} as any)
-
-export const useTheme = (): DefaultTheme => useContext(themeContext)