feat(core): update user menu with color schemes

sanity-io · Dec 13, 2022 · 788d23b · 788d23b
1 parent a1f6e00
commit 788d23b
Showing 1 changed file with 41 additions and 10 deletions.
diff --git a/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx b/packages/sanity/src/core/studio/components/navbar/userMenu/UserMenu.tsx
@@ -1,4 +1,12 @@
-import {SunIcon, MoonIcon, LeaveIcon, ChevronDownIcon, CogIcon} from '@sanity/icons'
+import {
+  SunIcon,
+  MoonIcon,
+  LeaveIcon,
+  ChevronDownIcon,
+  CogIcon,
+  DesktopIcon,
+  CheckmarkIcon,
+} from '@sanity/icons'
 import {
   Box,
   Button,
@@ -15,7 +23,7 @@ import {
   Tooltip,
   useRootTheme,
 } from '@sanity/ui'
-import React, {useCallback, useMemo} from 'react'
+import React, {useMemo} from 'react'
 import styled from 'styled-components'
 import {UserAvatar} from '../../../../components'
 import {getProviderTitle} from '../../../../store'
@@ -40,7 +48,7 @@ const AvatarBox = styled(Box)`
 export function UserMenu() {
   const {currentUser, projectId, auth} = useWorkspace()
   const theme = useRootTheme().theme as StudioTheme
-  const {scheme, setScheme} = useColorScheme()
+  const {scheme, setScheme, clearStoredScheme, usingSystemScheme} = useColorScheme()
 
   const providerTitle = getProviderTitle(currentUser?.provider)
 
@@ -54,10 +62,6 @@ export function UserMenu() {
     [scheme]
   )
 
-  const handleToggleScheme = useCallback(() => {
-    setScheme(scheme === 'dark' ? 'light' : 'dark')
-  }, [scheme, setScheme])
-
   return (
     <MenuButton
       button={
@@ -114,10 +118,37 @@ export function UserMenu() {
             <>
               <MenuDivider />
 
+              <Box padding={2}>
+                <Label size={1} muted>
+                  Appearance
+                </Label>
+              </Box>
+
+              <MenuItem
+                aria-label="Use system appearance"
+                icon={DesktopIcon}
+                onClick={clearStoredScheme}
+                pressed={usingSystemScheme}
+                text="System"
+                iconRight={usingSystemScheme && <CheckmarkIcon />}
+              />
+
+              <MenuItem
+                aria-label="Use dark appearance"
+                icon={MoonIcon}
+                onClick={() => setScheme('dark')}
+                pressed={scheme === 'dark' && !usingSystemScheme}
+                iconRight={scheme === 'dark' && !usingSystemScheme && <CheckmarkIcon />}
+                text="Dark"
+              />
+
               <MenuItem
-                icon={scheme === 'dark' ? SunIcon : MoonIcon}
-                onClick={handleToggleScheme}
-                text={scheme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
+                aria-label="Use light appearance"
+                icon={SunIcon}
+                onClick={() => setScheme('light')}
+                pressed={scheme === 'light' && !usingSystemScheme}
+                iconRight={scheme === 'light' && !usingSystemScheme && <CheckmarkIcon />}
+                text="Light"
               />
             </>
           )}