diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index 606d27ea..06f19501 100644 --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -320,6 +320,35 @@ export function MoonIcon({ ) } +// Copyright (c) 2020 Refactoring UI Inc. +// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE +export function SunIcon({ + style, + size, + strokeWidth = 1.5, +}: { + style?: StyleProp + size?: string | number + strokeWidth?: number +}) { + return ( + + + + ) +} + // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE export function UserIcon({ diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index d6663ce3..fcdea35e 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -11,13 +11,14 @@ import {s} from 'lib/styles' import {useStores} from 'state/index' import {pluralize} from 'lib/strings/helpers' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {MoonIcon} from 'lib/icons' +import {MoonIcon, SunIcon} from 'lib/icons' import {formatCount} from 'view/com/util/numeric/format' export const DesktopRightNav = observer(function DesktopRightNav() { const store = useStores() const pal = usePalette('default') const mode = useColorSchemeStyle('Light', 'Dark') + const otherMode = mode === 'Dark' ? 'Light' : 'Dark'; const onDarkmodePress = React.useCallback(() => { store.shell.setDarkMode(!store.shell.darkMode) @@ -71,10 +72,15 @@ export const DesktopRightNav = observer(function DesktopRightNav() { : 'Sets display to dark mode' }> - + { + mode === 'Dark' ? + + : + + } - {mode} mode + {otherMode} mode