Handle using system theme when toggling from the library

omnivore-app · Feb 22, 2024 · 84fcbce · 84fcbce
1 parent b56610c
commit 84fcbce
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 35 deletions.
diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -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

diff --git a/packages/web/lib/hooks/useCurrentTheme.tsx b/packages/web/lib/hooks/useCurrentTheme.tsx
@@ -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])