prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Simplify theme selector

Browse source
This commit is contained in:
Jackson Harper 2023-03-03 19:49:40 +08:00
parent e6bfaa4500
commit d93b4458e1
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
packages/web/components/templates/PrimaryDropdown.tsx
View file

@ -2,7 +2,11 @@ import { useRouter } from 'next/router'
import { Moon, Sun } from 'phosphor-react'
import { ReactNode, useCallback, useState } from 'react'
import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
import { currentThemeName, updateTheme } from '../../lib/themeUpdater'
import {
currentTheme,
currentThemeName,
updateTheme,
} from '../../lib/themeUpdater'
import { Avatar } from '../elements/Avatar'
import { AvatarDropdown } from '../elements/AvatarDropdown'
import { Button } from '../elements/Button'
@ -221,8 +225,6 @@ const StyledToggleButton = styled('button', {
})
function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
const [currentTheme, setCurrentTheme] = useState(currentThemeName())
return (
<VStack>
<HStack
@ -256,20 +258,18 @@ function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
}}
>
<StyledToggleButton
data-state={currentTheme != ThemeId.Dark ? 'on' : 'off'}
data-state={currentTheme() != ThemeId.Darker ? 'on' : 'off'}
onClick={() => {
updateTheme(ThemeId.Light)
setCurrentTheme(ThemeId.Light)
}}
>
Light
<Sun size={15} color={theme.colors.thTextContrast2.toString()} />
</StyledToggleButton>
<StyledToggleButton
data-state={currentTheme == ThemeId.Dark ? 'on' : 'off'}
data-state={currentTheme() == ThemeId.Darker ? 'on' : 'off'}
onClick={() => {
updateTheme(ThemeId.Dark)
setCurrentTheme(ThemeId.Dark)
updateTheme(ThemeId.Darker)
}}
>
Dark

2
packages/web/lib/themeUpdater.tsx
View file

@ -55,7 +55,7 @@ export function currentThemeName(): string {
}
}
function currentTheme(): ThemeId | undefined {
export function currentTheme(): ThemeId | undefined {
if (typeof window === 'undefined') {
return undefined
}