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

Handle using system theme when toggling from the library

Browse source
This commit is contained in:
Jackson Harper 2024-02-22 17:22:44 +08:00
parent b56610ca66
commit 84fcbce94a
2 changed files with 30 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,7 @@
import { useRouter } from 'next/router'
import { Moon, Sun } from 'phosphor-react'
import { ReactNode, useCallback, useState } from 'react'
import { ReactNode, useCallback } from 'react'
import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
import { getCurrentLocalTheme, updateTheme } from '../../lib/themeUpdater'
import { Avatar } from '../elements/Avatar'
import { AvatarDropdown } from '../elements/AvatarDropdown'
import {
@ -16,7 +15,7 @@ import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
import { StyledText } from '../elements/StyledText'
import { styled, theme, ThemeId } from '../tokens/stitches.config'
import { LayoutType } from './homeFeed/HomeFeedContainer'
import { DropdownMenu } from '@radix-ui/react-dropdown-menu'
import { useCurrentTheme, isDarkTheme } from '../../lib/hooks/useCurrentTheme'
type PrimaryDropdownProps = {
children?: ReactNode
@ -267,15 +266,7 @@ export const StyledToggleButton = styled('button', {
})
function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
const [displayTheme, setDisplayTheme] = useState(getCurrentLocalTheme())
const doUpdateTheme = useCallback(
(newTheme: ThemeId) => {
updateTheme(newTheme)
setDisplayTheme(newTheme)
},
[setDisplayTheme]
)
const { currentTheme, setCurrentTheme } = useCurrentTheme()
return (
<>
@ -311,18 +302,22 @@ function ThemeSection(props: PrimaryDropdownProps): JSX.Element {
}}
>
<StyledToggleButton
data-state={getCurrentLocalTheme() != ThemeId.Dark ? 'on' : 'off'}
data-state={
!(currentTheme && isDarkTheme(currentTheme)) ? 'on' : 'off'
}
onClick={() => {
doUpdateTheme(ThemeId.Light)
setCurrentTheme(ThemeId.Light)
}}
>
Light
<Sun size={15} color={theme.colors.thTextContrast2.toString()} />
</StyledToggleButton>
<StyledToggleButton
data-state={getCurrentLocalTheme() == ThemeId.Dark ? 'on' : 'off'}
data-state={
currentTheme && isDarkTheme(currentTheme) ? 'on' : 'off'
}
onClick={() => {
doUpdateTheme(ThemeId.Dark)
setCurrentTheme(ThemeId.Dark)
}}
>
Dark

38
packages/web/lib/hooks/useCurrentTheme.tsx
View file

@ -7,6 +7,25 @@ const themeKey = 'currentTheme'
const preferredDarkThemeKey = 'preferredDarkThemeKey'
const preferredLightThemeKey = 'preferredLightThemeKey'
export const isDarkTheme = (themeId: string): boolean => {
if (
themeId === 'Dark' ||
themeId === 'Darker' ||
themeId === 'Apollo' ||
themeId == 'Black'
) {
return true
}
return false
}
export const isLightTheme = (themeId: string): boolean => {
if (themeId === 'Sepia' || themeId == 'Light') {
return true
}
return false
}
export function useCurrentTheme() {
const isDarkMode = useDarkModeListener()
const [currentThemeInternal, setCurrentThemeInternal] = usePersistedState<
@ -29,25 +48,6 @@ export function useCurrentTheme() {
}
)
const isDarkTheme = (themeId: string): boolean => {
if (
themeId === 'Dark' ||
themeId === 'Darker' ||
themeId === 'Apollo' ||
themeId == 'Black'
) {
return true
}
return false
}
const isLightTheme = (themeId: string): boolean => {
if (themeId === 'Sepia' || themeId == 'Light') {
return true
}
return false
}
const currentTheme = useMemo(() => {
return currentThemeInternal
}, [currentThemeInternal])