/
theme-switch.tsx
44 lines (41 loc) · 1.33 KB
/
theme-switch.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import React, { memo, ReactElement } from 'react'
import { useTheme } from 'next-themes'
import { Select } from './select'
import { SunIcon, MoonIcon } from 'nextra/icons'
import { useMounted } from 'nextra/hooks'
import { useConfig } from '../contexts'
export function ThemeSwitch({ lite = true }): ReactElement {
const { theme, setTheme, systemTheme } = useTheme()
const renderedTheme = theme === 'system' ? systemTheme : theme
const config = useConfig()
const mounted = useMounted()
return (
<Select
position={config.i18n.length > 0 ? (lite ? 'right' : 'left') : undefined}
onChange={option => {
setTheme(option.key)
}}
selected={{
key: theme || '',
name: (
<div className="flex items-center gap-2 capitalize">
{mounted && renderedTheme === 'dark' ? (
<MoonIcon className="h-4 w-4 [&>path]:fill-current" />
) : (
<SunIcon className="h-4 w-4 [&>path]:fill-current" />
)}
<span className={lite ? 'md:hidden' : ''}>
{mounted ? theme : 'light'}
</span>
</div>
)
}}
options={[
{ key: 'light', name: 'Light' },
{ key: 'dark', name: 'Dark' },
{ key: 'system', name: 'System' }
]}
/>
)
}
export default memo(ThemeSwitch)