Merge pull request #2641 from RedisInsight/fe/bugfix/RI-4981

Fe/bugfix/ri 4981

Author: mariasergeenko

redisinsight/desktop/app.ts

@@ -13,10 +13,12 @@ import {
   initAutoUpdaterHandlers,
   launchApiServer,
   initCloudHandlers,
+  electronStore,
 } from 'desktopSrc/lib'
 import { wrapErrorMessageSensitiveData } from 'desktopSrc/utils'
 import { configMain as config } from 'desktopSrc/config'
 import { deepLinkHandler, deepLinkWindowHandler } from 'desktopSrc/lib/app/deep-link.handlers'
+import { ElectronStorageItem } from 'uiSrc/electron/constants'
 
 if (!config.isProduction) {
   const sourceMapSupport = require('source-map-support')
@@ -33,6 +35,8 @@ const init = async () => {
   initTray()
   initCloudHandlers()
 
+  nativeTheme.themeSource = electronStore?.get(ElectronStorageItem.themeSource) || config.themeSource
+
   checkForUpdate(process.env.MANUAL_UPGRADES_LINK || process.env.UPGRADES_LINK)
 
   app.setName(config.name)

redisinsight/desktop/config.json

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

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

@@ -1,6 +1,6 @@
 import { app, ipcMain, nativeTheme } from 'electron'
 import { electronStore } from 'desktopSrc/lib'
-import { IpcInvokeEvent } from 'uiSrc/electron/constants'
+import { ElectronStorageItem, IpcInvokeEvent } from 'uiSrc/electron/constants'
 
 export const initIPCHandlers = () => {
   ipcMain.handle(IpcInvokeEvent.getAppVersion, () => app?.getVersion())
@@ -10,6 +10,9 @@ export const initIPCHandlers = () => {
   ipcMain.handle(IpcInvokeEvent.deleteStoreValue, (_event, key) => electronStore?.delete(key))
 
   ipcMain.handle(IpcInvokeEvent.themeChange, (_event, theme: string) => {
-    nativeTheme.themeSource = theme.toLowerCase()
+    const themeSource = theme.toLowerCase() as typeof nativeTheme.themeSource
+
+    nativeTheme.themeSource = themeSource
+    electronStore?.set(ElectronStorageItem.themeSource, themeSource)
   })
 }

redisinsight/ui/src/contexts/themeContext.tsx

@@ -9,7 +9,7 @@ interface Props {
 const THEME_NAMES = THEMES.map(({ value }) => value)
 
 export const defaultState = {
-  theme: THEME_NAMES[0],
+  theme: THEME_NAMES[1], // dark theme by default
   usingSystemTheme: localStorageService.get(BrowserStorageItem.theme) === Theme.System,
   changeTheme: (themeValue: any) => {
     themeService.applyTheme(themeValue)
@@ -36,7 +36,7 @@ export class ThemeProvider extends React.Component<Props> {
     }
   }
 
-  getSystemTheme = () => window.matchMedia && window.matchMedia(THEME_MATCH_MEDIA_DARK).matches ? Theme.Dark : Theme.Light
+  getSystemTheme = () => (window.matchMedia && window.matchMedia(THEME_MATCH_MEDIA_DARK).matches ? Theme.Dark : Theme.Light)
 
   changeTheme = (themeValue: any) => {
     let actualTheme = themeValue

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

@@ -6,6 +6,7 @@ enum ElectronStorageItem {
   isDisplayAppInTray = 'isDisplayAppInTray',
   updatePreviousVersion = 'updatePreviousVersion',
   zoomFactor = 'zoomFactor',
+  themeSource = 'themeSource',
 }
 
 export default ElectronStorageItem