refs #850 Add define types for theme in constants

src/constants/theme/index.d.ts

@@ -0,0 +1,17 @@
+export type ThemeType = {
+  name: string,
+  key: string
+}
+
+export type ThemeList = {
+  Light: ThemeType,
+  Dark: ThemeType,
+  SolarizedLight: ThemeType,
+  SolarizedDark: ThemeType,
+  KimbieDark: ThemeType,
+  Custom: ThemeType
+}
+
+declare var t: ThemeList
+
+export default t

src/renderer/store/App.ts

@@ -1,7 +1,7 @@
 import { ipcRenderer } from 'electron'
 import { MutationTree, ActionTree, Module } from 'vuex'
 import router from '@/router'
-import { LightTheme, DarkTheme, SolarizedLightTheme, SolarizedDarkTheme, KimbieDarkTheme } from '@/utils/theme'
+import { LightTheme, DarkTheme, SolarizedLightTheme, SolarizedDarkTheme, KimbieDarkTheme, ThemeType } from '@/utils/theme'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
@@ -17,7 +17,7 @@ export interface Notify {
 }
 
 export interface AppState {
-  theme: any, // TODO: type
+  theme: ThemeType,
   fontSize: number,
   displayNameStyle: number,
   notify: Notify,
@@ -127,7 +127,7 @@ const actions: ActionTree<AppState, RootState> = {
     })
   },
   updateTheme: ({ commit }, appearance: any) => {
-    const themeKey = appearance.theme
+    const themeKey: string = appearance.theme
     switch (themeKey) {
       case Theme.Light.key:
         commit(MUTATION_TYPES.UPDATE_THEME, LightTheme)

src/renderer/store/Preferences/Appearance.ts

@@ -2,30 +2,17 @@ import { ipcRenderer } from 'electron'
 import DisplayStyle from '~/src/constants/displayStyle'
 import Theme from '~/src/constants/theme'
 import TimeFormat from '~/src/constants/timeFormat'
-import { LightTheme } from '@/utils/theme'
+import { LightTheme, ThemeType } from '@/utils/theme'
 import DefaultFonts from '@/utils/fonts'
 import { Module, MutationTree, ActionTree } from 'vuex'
 import { RootState } from '@/store'
 
-interface ColorThemeSet {
-  background_color: string,
-  selected_background_color: string,
-  global_header_color: string,
-  side_menu_color: string,
-  primary_color: string,
-  regular_color: string,
-  secondary_color: string,
-  border_color: string,
-  header_menu_color: string,
-  wrapper_mask_color: string
-}
-
 interface AppearanceSet {
   theme: string,
   fontSize: number,
   displayNameStyle: number,
   timeFormat: number,
-  customThemeColor: ColorThemeSet,
+  customThemeColor: ThemeType,
   font: string
 }
 
@@ -174,7 +161,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     })
   },
   updateCustomThemeColor: ({ dispatch, state, commit }, value: object) => {
-    const newCustom: ColorThemeSet = Object.assign({}, state.appearance.customThemeColor, value)
+    const newCustom: ThemeType = Object.assign({}, state.appearance.customThemeColor, value)
     const newAppearance: AppearanceSet = Object.assign({}, state.appearance, {
       customThemeColor: newCustom
     })

src/renderer/utils/theme/index.d.ts

@@ -0,0 +1,20 @@
+export type ThemeType = {
+  background_color: string,
+  selected_background_color: string,
+  global_header_color: string,
+  side_menu_color: string,
+  primary_color: string,
+  regular_color: string,
+  secondary_color: string,
+  border_color: string,
+  header_menu_color: string,
+  wrapper_mask_color: string
+}
+
+declare var LightTheme: ThemeType
+declare var DarkTheme: ThemeType
+declare var SolarizedLightTheme: ThemeType
+declare var SolarizedDarkTheme: ThemeType
+declare var KimbieDarkTheme: ThemeType
+
+export { LightTheme, DarkTheme, SolarizedLightTheme, SolarizedDarkTheme, KimbieDarkTheme }