From d93b4458e1043c7feffc65137604c5b8d17ffd8c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 3 Mar 2023 19:49:40 +0800
Subject: [PATCH] Simplify theme selector

---
 .../web/components/templates/PrimaryDropdown.tsx | 16 ++++++++--------
 packages/web/lib/themeUpdater.tsx                |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/web/components/templates/PrimaryDropdown.tsx b/packages/web/components/templates/PrimaryDropdown.tsx
index bb6d7ded4..e5ec3681e 100644
--- a/packages/web/components/templates/PrimaryDropdown.tsx
+++ b/packages/web/components/templates/PrimaryDropdown.tsx
@@ -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
diff --git a/packages/web/lib/themeUpdater.tsx b/packages/web/lib/themeUpdater.tsx
index b1cdeae83..24668b03b 100644
--- a/packages/web/lib/themeUpdater.tsx
+++ b/packages/web/lib/themeUpdater.tsx
@@ -55,7 +55,7 @@ export function currentThemeName(): string {
   }
 }
 
-function currentTheme(): ThemeId | undefined {
+export function currentTheme(): ThemeId | undefined {
   if (typeof window === 'undefined') {
     return undefined
   }