Merge pull request #1931 from oasisprotocol/mz/systemTheme

Enable system option in theme dropdown

.changelog/1931.trivial.md

@@ -0,0 +1 @@
+Enable system option in theme dropdown

src/app/components/ThemeSwitcher/index.tsx

@@ -5,6 +5,7 @@
  */
 import { Moon } from 'grommet-icons/es6/icons/Moon'
 import { Sun } from 'grommet-icons/es6/icons/Sun'
+import { System } from 'grommet-icons/es6/icons/System'
 import { memo } from 'react'
 import { TFunction } from 'i18next'
 import { useTranslation } from 'react-i18next'
@@ -13,12 +14,14 @@ import { themeActions } from 'styles/theme/slice'
 import { selectTheme } from 'styles/theme/slice/selectors'
 import { SelectWithIcon } from '../SelectWithIcon'
 import { SidebarButton } from '../Sidebar'
+import { getTargetTheme } from 'styles/theme/utils'
 
 interface Props {}
 
 const getThemesIcons = (t: TFunction) => ({
   light: <Sun aria-label={t('theme.lightMode', 'Light mode')} />,
   dark: <Moon aria-label={t('theme.darkMode', 'Dark mode')} />,
+  system: <System aria-label={t('theme.system', 'System')} />,
 })
 
 export const ThemeSwitcher = memo((props: Props) => {
@@ -36,10 +39,9 @@ export const ThemeSwitcher = memo((props: Props) => {
       label: t('theme.lightMode', 'Light mode'),
     },
   }
-
-  const currentMode = modes[theme]
+  const currentMode = modes[getTargetTheme(theme)]
   const switchTheme = () => {
-    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    const newTheme = getTargetTheme(theme) === 'dark' ? 'light' : 'dark'
     dispatch(themeActions.changeTheme(newTheme))
   }
 
@@ -51,7 +53,7 @@ export const ThemeSelect = () => {
   const theme = useSelector(selectTheme)
   const dispatch = useDispatch()
   const icons = getThemesIcons(t)
-  const themeOptions: { value: 'dark' | 'light'; label: string }[] = [
+  const themeOptions: { value: 'dark' | 'light' | 'system'; label: string }[] = [
     {
       value: 'light',
       label: t('theme.lightMode', 'Light mode'),
@@ -60,14 +62,18 @@ export const ThemeSelect = () => {
       value: 'dark',
       label: t('theme.darkMode', 'Dark mode'),
     },
+    {
+      value: 'system',
+      label: t('theme.system', 'System'),
+    },
   ]
 
   return (
     <SelectWithIcon
       label={t('theme.title', 'Theme')}
       id="theme"
       name="theme"
-      icon={theme === 'light' ? icons.light : icons.dark}
+      icon={icons[theme]}
       value={theme}
       options={themeOptions}
       onChange={option => dispatch(themeActions.changeTheme(option))}

src/locales/en/translation.json

@@ -428,6 +428,7 @@
   "theme": {
     "darkMode": "Dark mode",
     "lightMode": "Light mode",
+    "system": "System",
     "title": "Theme"
   },
   "toolbar": {

src/styles/theme/ThemeProvider.tsx

@@ -8,6 +8,7 @@ import { useSelector } from 'react-redux'
 import { selectTheme } from './slice/selectors'
 import { dataTableTheme } from './dataTableTheme'
 import { css } from 'styled-components'
+import { getTargetTheme } from './utils'
 
 /**
  * React-data-table by default sets its own background and text colors
@@ -340,7 +341,7 @@ export const ThemeProvider = (props: { children: React.ReactChild }) => {
   const mode = useSelector(selectTheme)
 
   return (
-    <Grommet theme={theme} themeMode={mode} style={{ minHeight: '100dvh' }}>
+    <Grommet theme={theme} themeMode={getTargetTheme(mode)} style={{ minHeight: '100dvh' }}>
       {React.Children.only(props.children)}
     </Grommet>
   )

src/styles/theme/slice/index.ts

@@ -12,7 +12,7 @@ export const themeSlice = createSlice({
   name: 'theme',
   initialState: () => getInitialState(),
   reducers: {
-    changeTheme(state, action: PayloadAction<'dark' | 'light'>) {
+    changeTheme(state, action: PayloadAction<'dark' | 'light' | 'system'>) {
       saveTheme(action.payload)
       state.selected = action.payload
     },

src/styles/theme/slice/selectors.ts

@@ -2,13 +2,6 @@ import { createSelector } from '@reduxjs/toolkit'
 
 import { RootState } from 'types'
 import { getInitialState } from '.'
-import { isSystemDark } from '../utils'
 
 const selectSlice = (state: RootState) => state.theme || getInitialState()
-export const selectTheme = createSelector([selectSlice], theme => {
-  if (theme.selected === 'system') {
-    return isSystemDark ? 'dark' : 'light'
-  }
-
-  return theme.selected
-})
+export const selectTheme = createSelector([selectSlice], theme => theme.selected)

src/styles/theme/utils.ts

@@ -5,6 +5,9 @@ export const isSystemDark = window?.matchMedia
   ? window.matchMedia('(prefers-color-scheme: dark)')?.matches
   : undefined
 
+export const getTargetTheme = (theme: 'light' | 'dark' | 'system') =>
+  theme === 'system' ? (isSystemDark ? 'dark' : 'light') : theme
+
 export function saveTheme(theme: ThemeKeyType) {
   window.localStorage.setItem('selectedTheme', theme)
 }