Merge pull request #2599 from RedisInsight/feature/RI-4893

RI-4893: Add system theme option

Author: vlad-dargel

redisinsight/desktop/app.ts

@@ -33,8 +33,6 @@ const init = async () => {
   initTray()
   initCloudHandlers()
 
-  nativeTheme.themeSource = config.themeSource
-
   checkForUpdate(process.env.MANUAL_UPGRADES_LINK || process.env.UPGRADES_LINK)
 
   app.setName(config.name)

redisinsight/desktop/config.json

@@ -3,7 +3,6 @@
   "defaultPort": 5530,
   "host": "localhost",
   "debug": false,
-  "themeSource": "dark",
   "appName": "RedisInsight",
   "schema": "redisinsight",
   "mainWindow": {

redisinsight/desktop/src/lib/app/ipc.handlers.ts

@@ -1,4 +1,4 @@
-import { app, ipcMain } from 'electron'
+import { app, ipcMain, nativeTheme } from 'electron'
 import { electronStore } from 'desktopSrc/lib'
 import { IpcInvokeEvent } from 'uiSrc/electron/constants'
 
@@ -8,4 +8,8 @@ export const initIPCHandlers = () => {
   ipcMain.handle(IpcInvokeEvent.getStoreValue, (_event, key) => electronStore?.get(key))
 
   ipcMain.handle(IpcInvokeEvent.deleteStoreValue, (_event, key) => electronStore?.delete(key))
+
+  ipcMain.handle(IpcInvokeEvent.themeChange, (_event, theme: string) => {
+    nativeTheme.themeSource = theme.toLowerCase()
+  })
 }

redisinsight/ui/src/App.tsx

@@ -12,6 +12,7 @@ import { themeService } from './services'
 import { Config, GlobalSubscriptions, NavigationMenu, Notifications, ShortcutsFlyout } from './components'
 import { ThemeProvider } from './contexts/themeContext'
 import MainComponent from './components/main/MainComponent'
+import ThemeComponent from './components/theme/ThemeComponent'
 import GlobalDialogs from './components/global-dialogs'
 import GlobalActionBar from './components/global-action-bar'
 
@@ -38,6 +39,7 @@ const App = ({ children }: { children?: ReactElement[] }) => {
   const { loading: serverLoading } = useSelector(appInfoSelector)
   return (
     <div className="main-container">
+      <ThemeComponent />
       { serverLoading
         ? <PagePlaceholder />
         : (

redisinsight/ui/src/components/theme/ThemeComponent.spec.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { render } from 'uiSrc/utils/test-utils'
+
+import ThemeComponent from './ThemeComponent'
+
+describe('ThemeComponent', () => {
+  it('should render', () => {
+    expect(render(<ThemeComponent />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/components/theme/ThemeComponent.tsx

@@ -0,0 +1,26 @@
+import React, { useContext, useEffect } from 'react'
+import { BrowserStorageItem, Theme, THEME_MATCH_MEDIA_DARK } from 'uiSrc/constants'
+import { localStorageService } from 'uiSrc/services'
+import { ThemeContext } from 'uiSrc/contexts/themeContext'
+
+const ThemeComponent = () => {
+  const themeContext = useContext(ThemeContext)
+  useEffect(() => {
+    const handler = event => {
+      let theme = localStorageService.get(BrowserStorageItem.theme)
+      if (theme === Theme.System) {
+        themeContext.changeTheme(theme)
+      }
+    }
+
+    window.matchMedia(THEME_MATCH_MEDIA_DARK).addEventListener('change', handler)
+
+    return () => {
+      window.matchMedia(THEME_MATCH_MEDIA_DARK).removeEventListener('change', handler)
+    }
+  }, [])
+
+  return <></>
+}
+
+export default ThemeComponent

redisinsight/ui/src/constants/themes.tsx

@@ -3,9 +3,14 @@ import { EuiSuperSelectOption } from '@elastic/eui'
 export enum Theme {
   Dark = 'DARK',
   Light = 'LIGHT',
+  System = 'SYSTEM',
 }
 
 export const THEMES: EuiSuperSelectOption<string>[] = [
+  {
+    inputDisplay: 'Match System',
+    value: Theme.System,
+  },
   {
     inputDisplay: 'Dark Theme',
     value: Theme.Dark,
@@ -16,4 +21,6 @@ export const THEMES: EuiSuperSelectOption<string>[] = [
   },
 ]
 
+export const THEME_MATCH_MEDIA_DARK = '(prefers-color-scheme: dark)'
+
 export default THEMES

redisinsight/ui/src/contexts/themeContext.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserStorageItem, THEMES } from '../constants'
+import { BrowserStorageItem, Theme, THEMES, THEME_MATCH_MEDIA_DARK } from '../constants'
 import { localStorageService, themeService } from '../services'
 
 interface Props {
@@ -10,6 +10,7 @@ const THEME_NAMES = THEMES.map(({ value }) => value)
 
 export const defaultState = {
   theme: THEME_NAMES[0],
+  usingSystemTheme: localStorageService.get(BrowserStorageItem.theme) === Theme.System,
   changeTheme: (themeValue: any) => {
     themeService.applyTheme(themeValue)
   },
@@ -25,28 +26,39 @@ export class ThemeProvider extends React.Component<Props> {
     const theme = !storedThemeValue || !THEME_NAMES.includes(storedThemeValue)
       ? defaultState.theme
       : storedThemeValue
+    const usingSystemTheme = theme === Theme.System
 
     themeService.applyTheme(theme)
 
     this.state = {
-      theme,
+      theme: theme === Theme.System ? this.getSystemTheme() : theme,
+      usingSystemTheme,
     }
   }
 
+  getSystemTheme = () => window.matchMedia && window.matchMedia(THEME_MATCH_MEDIA_DARK).matches ? Theme.Dark : Theme.Light
+
   changeTheme = (themeValue: any) => {
-    this.setState({ theme: themeValue }, () => {
+    let actualTheme = themeValue
+    if (themeValue === Theme.System) {
+      actualTheme = this.getSystemTheme()
+    }
+    window.app?.ipc?.invoke?.('theme:change', themeValue)
+
+    this.setState({ theme: actualTheme, usingSystemTheme: themeValue === Theme.System }, () => {
       themeService.applyTheme(themeValue)
     })
   }
 
   render() {
     const { children } = this.props
-    const { theme }: any = this.state
+    const { theme, usingSystemTheme }: any = this.state
 
     return (
       <ThemeContext.Provider
         value={{
           theme,
+          usingSystemTheme,
           changeTheme: this.changeTheme,
         }}
       >

redisinsight/ui/src/electron/constants/ipcEvent.ts

@@ -4,6 +4,7 @@ enum IpcInvokeEvent {
   getAppVersion = 'app:get:version',
   cloudOauth = 'cloud:oauth',
   windowOpen = 'window:open',
+  themeChange = 'theme:change',
 }
 
 enum IpcOnEvent {

redisinsight/ui/src/pages/settings/SettingsPage.tsx

@@ -18,7 +18,7 @@ import {
 import { useDispatch, useSelector } from 'react-redux'
 
 import { setTitle } from 'uiSrc/utils'
-import { FeatureFlags, THEMES } from 'uiSrc/constants'
+import { FeatureFlags, Theme, THEMES } from 'uiSrc/constants'
 import { useDebouncedEffect } from 'uiSrc/services'
 import { ConsentsNotifications, ConsentsPrivacy, FeatureFlagComponent } from 'uiSrc/components'
 import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPageView } from 'uiSrc/telemetry'
@@ -43,7 +43,11 @@ const SettingsPage = () => {
 
   const options = THEMES
   const themeContext = useContext(ThemeContext)
-  const { theme, changeTheme } = themeContext
+  let { theme, changeTheme, usingSystemTheme } = themeContext
+
+  if (usingSystemTheme) {
+    theme = Theme.System
+  }
 
   useEffect(() => {
     // componentDidMount