change icon on dark mode press

src/lib/icons.tsx

@@ -320,6 +320,33 @@ export function MoonIcon({
   )
 }
 
+export function SunIcon({
+  style,
+  size,
+  strokeWidth = 1.5,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+  strokeWidth?: number
+}) {
+  return (
+    <Svg
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={strokeWidth}
+      viewBox="0 0 24 24"
+      width={size || 32}
+      height={size || 32}
+      style={style}>
+      <Path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0z"
+      />
+    </Svg>
+  )
+}
+
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
 export function UserIcon({

src/view/shell/Drawer.tsx

@@ -28,6 +28,7 @@ import {
   MagnifyingGlassIcon2Solid,
   MoonIcon,
   UserIconSolid,
+  SunIcon,
 } from 'lib/icons'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {Text} from 'view/com/util/text/Text'
@@ -273,11 +274,19 @@ export const DrawerContent = observer(() => {
                   ? pal.btn
                   : styles.footerBtnDarkMode,
               ]}>
-              <MoonIcon
+              {store.shell.darkMode ? (
-                size={22}
+                <MoonIcon
-                style={pal.text as StyleProp<ViewStyle>}
+                  size={22}
-                strokeWidth={2}
+                  style={pal.text as StyleProp<ViewStyle>}
-              />
+                  strokeWidth={2}
+                />
+              ) : (
+                <SunIcon
+                  size={22}
+                  style={pal.text as StyleProp<ViewStyle>}
+                  strokeWidth={2}
+                />
+              )}
             </TouchableOpacity>
           )}
           <TouchableOpacity