refs #2693 Use system theme as the default theme

src/config/locales/en/translation.json

@@ -175,6 +175,7 @@
       "title": "Appearance",
       "theme_color": "Theme color",
       "theme": {
+        "system": "System",
         "light": "Light",
         "dark": "Dark",
         "solarized_light": "SolarizedLight",

src/constants/theme/index.d.ts

@@ -1,14 +1,15 @@
 export type ThemeType = {
-  name: string,
+  name: string
   key: string
 }
 
 export type ThemeList = {
-  Light: ThemeType,
-  Dark: ThemeType,
-  SolarizedLight: ThemeType,
-  SolarizedDark: ThemeType,
-  KimbieDark: ThemeType,
+  System: ThemeType
+  Light: ThemeType
+  Dark: ThemeType
+  SolarizedLight: ThemeType
+  SolarizedDark: ThemeType
+  KimbieDark: ThemeType
   Custom: ThemeType
 }
 

src/constants/theme/index.js

@@ -1,4 +1,8 @@
 export default {
+  System: {
+    name: 'preferences.appearance.theme.system',
+    key: 'system'
+  },
   Light: {
     name: 'preferences.appearance.theme.light',
     key: 'light'

src/main/index.ts

@@ -1034,6 +1034,10 @@ ipcMain.handle('update-preferences', async (_: IpcMainInvokeEvent, data: any) =>
   return conf
 })
 
+ipcMain.handle('system-use-dark-theme', async (_: IpcMainInvokeEvent) => {
+  return nativeTheme.shouldUseDarkColors
+})
+
 ipcMain.on('change-collapse', (_event: IpcMainEvent, value: boolean) => {
   const preferences = new Preferences(preferencesDBPath)
   preferences

src/main/preferences.ts

@@ -67,7 +67,7 @@ const notification: Notification = {
 }
 
 const appearance: Appearance = {
-  theme: Theme.Light.key,
+  theme: Theme.System.key,
   fontSize: 14,
   displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
   timeFormat: TimeFormat.Absolute.value,

src/renderer/components/Preferences/Appearance.vue

@@ -65,7 +65,7 @@ export default {
   data() {
     return {
       nameStyles: [DisplayStyle.DisplayNameAndUsername, DisplayStyle.DisplayName, DisplayStyle.Username],
-      themes: [Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom],
+      themes: [Theme.System, Theme.Light, Theme.Dark, Theme.SolarizedLight, Theme.SolarizedDark, Theme.KimbieDark, Theme.Custom],
       timeFormats: [TimeFormat.Absolute, TimeFormat.Relative]
     }
   },

src/renderer/store/App.ts

@@ -116,7 +116,7 @@ const actions: ActionTree<AppState, RootState> = {
   },
   loadPreferences: async ({ commit, dispatch }) => {
     const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences')
-    dispatch('updateTheme', conf.appearance)
+    await dispatch('updateTheme', conf.appearance)
     commit(MUTATION_TYPES.UPDATE_DISPLAY_NAME_STYLE, conf.appearance.displayNameStyle)
     commit(MUTATION_TYPES.UPDATE_FONT_SIZE, conf.appearance.fontSize)
     commit(MUTATION_TYPES.UPDATE_NOTIFY, conf.notification.notify)
@@ -129,9 +129,18 @@ const actions: ActionTree<AppState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_HIDE_ALL_ATTACHMENTS, conf.general.timeline.hideAllAttachments)
     return conf
   },
-  updateTheme: ({ commit }, appearance: Appearance) => {
+  updateTheme: async ({ commit }, appearance: Appearance) => {
     const themeKey: string = appearance.theme
     switch (themeKey) {
+      case Theme.System.key: {
+        const dark: boolean = await win.ipcRenderer.invoke('system-use-dark-theme')
+        if (dark) {
+          commit(MUTATION_TYPES.UPDATE_THEME, DarkTheme)
+        } else {
+          commit(MUTATION_TYPES.UPDATE_THEME, LightTheme)
+        }
+        break
+      }
       case Theme.Light.key:
         commit(MUTATION_TYPES.UPDATE_THEME, LightTheme)
         break

src/renderer/store/Preferences/Appearance.ts

@@ -18,7 +18,7 @@ export type AppearanceState = {
 
 const state = (): AppearanceState => ({
   appearance: {
-    theme: Theme.Light.key,
+    theme: Theme.System.key,
     fontSize: 14,
     displayNameStyle: DisplayStyle.DisplayNameAndUsername.value,
     timeFormat: TimeFormat.Absolute.value,