diff --git a/src/renderer/components/Preferences/Appearance/ColorPallet.vue b/src/renderer/components/Preferences/Appearance/ColorPallet.vue
index c22b7204..07ccdf64 100644
--- a/src/renderer/components/Preferences/Appearance/ColorPallet.vue
+++ b/src/renderer/components/Preferences/Appearance/ColorPallet.vue
@@ -1,189 +1,144 @@
 <template>
   <el-form class="pallet" label-position="top" size="small">
     <div class="item">
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.background_color')"
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.background_color')">
         <el-color-picker v-model="background"></el-color-picker>
       </el-form-item>
-      <el-form-item
-        :label="
-          $t('preferences.appearance.custom_theme.selected_background_color')
-        "
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.selected_background_color')">
         <el-color-picker v-model="selectedBackground"></el-color-picker>
       </el-form-item>
     </div>
     <div class="item">
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.global_header_color')"
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.global_header_color')">
         <el-color-picker v-model="globalHeader"></el-color-picker>
       </el-form-item>
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.side_menu_color')"
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.side_menu_color')">
         <el-color-picker v-model="sideMenu"></el-color-picker>
       </el-form-item>
     </div>
     <div class="item">
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.primary_color')"
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.primary_color')">
         <el-color-picker v-model="primary"></el-color-picker>
       </el-form-item>
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.regular_color')"
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.regular_color')">
         <el-color-picker v-model="regular"></el-color-picker>
       </el-form-item>
     </div>
     <div class="item">
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.secondary_color')"
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.secondary_color')">
         <el-color-picker v-model="secondary"></el-color-picker>
       </el-form-item>
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.border_color')"
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.border_color')">
         <el-color-picker v-model="border"></el-color-picker>
       </el-form-item>
     </div>
     <div class="item">
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.header_menu_color')"
-      >
+      <el-form-item :label="$t('preferences.appearance.custom_theme.header_menu_color')">
         <el-color-picker v-model="headerMenu"></el-color-picker>
       </el-form-item>
-      <el-form-item
-        :label="$t('preferences.appearance.custom_theme.wrapper_mask_color')"
-      >
-        <el-color-picker
-          v-model="wrapperMask"
-          :show-alpha="true"
-        ></el-color-picker>
+      <el-form-item :label="$t('preferences.appearance.custom_theme.wrapper_mask_color')">
+        <el-color-picker v-model="wrapperMask" :show-alpha="true"></el-color-picker>
       </el-form-item>
     </div>
   </el-form>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent, computed } from 'vue'
+import { useStore } from '@/store'
+import { ACTION_TYPES } from '@/store/Preferences/Appearance'
+
+export default defineComponent({
   name: 'color-pallet',
-  computed: {
-    background: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.background_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          background_color: value,
+  setup() {
+    const space = 'Preferences/Appearance'
+    const store = useStore()
+
+    const background = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.background_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          background_color: value
         })
-      },
-    },
-    selectedBackground: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.selected_background_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          selected_background_color: value,
+    })
+    const selectedBackground = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.selected_background_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          selected_background_color: value
         })
-      },
-    },
-    globalHeader: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.global_header_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          global_header_color: value,
+    })
+    const globalHeader = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.global_header_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          global_header_color: value
         })
-      },
-    },
-    sideMenu: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.side_menu_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          side_menu_color: value,
+    })
+    const sideMenu = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.side_menu_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          side_menu_color: value
         })
-      },
-    },
-    primary: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.primary_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          primary_color: value,
+    })
+    const primary = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.primary_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          primary_color: value
         })
-      },
-    },
-    regular: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.regular_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          regular_color: value,
+    })
+    const regular = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.regular_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          regular_color: value
         })
-      },
-    },
-    secondary: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.secondary_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          secondary_color: value,
+    })
+    const secondary = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.secondary_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          secondary_color: value
         })
-      },
-    },
-    border: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.border_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          border_color: value,
+    })
+    const border = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.border_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          border_color: value
         })
-      },
-    },
-    headerMenu: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.header_menu_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          header_menu_color: value,
+    })
+    const headerMenu = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.header_menu_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          header_menu_color: value
         })
-      },
-    },
-    wrapperMask: {
-      get() {
-        return this.$store.state.Preferences.Appearance.appearance
-          .customThemeColor.wrapper_mask_color
-      },
-      set(value) {
-        this.$store.dispatch('Preferences/Appearance/updateCustomThemeColor', {
-          wrapper_mask_color: value,
+    })
+    const wrapperMask = computed({
+      get: () => store.state.Preferences.Appearance.appearance.customThemeColor.wrapper_mask_color,
+      set: (value: string) =>
+        store.dispatch(`${space}/${ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR}`, {
+          wrapper_mask_color: value
         })
-      },
-    },
-  },
-}
+    })
+
+    return {
+      background,
+      selectedBackground,
+      globalHeader,
+      sideMenu,
+      primary,
+      regular,
+      secondary,
+      border,
+      headerMenu,
+      wrapperMask
+    }
+  }
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/renderer/store/Preferences/Appearance.ts b/src/renderer/store/Preferences/Appearance.ts
index fd30c173..6b21aa0b 100644
--- a/src/renderer/store/Preferences/Appearance.ts
+++ b/src/renderer/store/Preferences/Appearance.ts
@@ -4,12 +4,13 @@ import TimeFormat from '~/src/constants/timeFormat'
 import { LightTheme, ThemeColorType } from '~/src/constants/themeColor'
 import DefaultFonts from '@/utils/fonts'
 import { Module, MutationTree, ActionTree } from 'vuex'
+import { toRaw } from 'vue'
 import { RootState } from '@/store'
 import { Appearance } from '~/src/types/appearance'
 import { BaseConfig } from '~/src/types/preference'
 import { MyWindow } from '~/src/types/global'
 
-const win = (window as any) as MyWindow
+const win = window as any as MyWindow
 
 export type AppearanceState = {
   appearance: Appearance
@@ -43,19 +44,31 @@ const mutations: MutationTree<AppearanceState> = {
   }
 }
 
+export const ACTION_TYPES = {
+  LOAD_APPEARANCE: 'loadAppearance',
+  LOAD_FONTS: 'loadFonts',
+  UPDATE_THEME: 'updateTheme',
+  UPDATE_FONT_SIZE: 'updateFontSize',
+  UPDATE_DISPLAY_NAME_STYLE: 'updateDisplayNameStyle',
+  UPDATE_TIME_FORMAT: 'updateTimeFormat',
+  UPDATE_CUSTOM_THEME_COLOR: 'updateCustomThemeColor',
+  UPDATE_FONT: 'updateFont',
+  UPDATE_TOOT_PADDING: 'updateTootPadding'
+}
+
 const actions: ActionTree<AppearanceState, RootState> = {
-  loadAppearance: async ({ commit }) => {
+  [ACTION_TYPES.LOAD_APPEARANCE]: async ({ commit }) => {
     const conf: BaseConfig = await win.ipcRenderer.invoke('get-preferences')
     commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
     return conf
   },
-  loadFonts: async ({ commit }) => {
+  [ACTION_TYPES.LOAD_FONTS]: async ({ commit }) => {
     const fonts: Array<string> = await win.ipcRenderer.invoke('list-fonts')
     commit(MUTATION_TYPES.UPDATE_FONTS, [DefaultFonts[0]].concat(fonts))
     return fonts
   },
-  updateTheme: async ({ dispatch, commit, state }, themeKey: string) => {
-    const newAppearance: Appearance = Object.assign({}, state.appearance, {
+  [ACTION_TYPES.UPDATE_THEME]: async ({ dispatch, commit, state }, themeKey: string) => {
+    const newAppearance: Appearance = Object.assign({}, toRaw(state.appearance), {
       theme: themeKey
     })
     const config = {
@@ -65,7 +78,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
     dispatch('App/loadPreferences', null, { root: true })
   },
-  updateFontSize: async ({ dispatch, commit, state }, fontSize: number) => {
+  [ACTION_TYPES.UPDATE_FONT_SIZE]: async ({ dispatch, commit, state }, fontSize: number) => {
     const newAppearance: Appearance = Object.assign({}, state.appearance, {
       fontSize: fontSize
     })
@@ -76,7 +89,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
     dispatch('App/loadPreferences', null, { root: true })
   },
-  updateDisplayNameStyle: async ({ dispatch, commit, state }, value: number) => {
+  [ACTION_TYPES.UPDATE_DISPLAY_NAME_STYLE]: async ({ dispatch, commit, state }, value: number) => {
     const newAppearance: Appearance = Object.assign({}, state.appearance, {
       displayNameStyle: value
     })
@@ -87,7 +100,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     dispatch('App/loadPreferences', null, { root: true })
     commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
   },
-  updateTimeFormat: async ({ dispatch, commit, state }, value: number) => {
+  [ACTION_TYPES.UPDATE_TIME_FORMAT]: async ({ dispatch, commit, state }, value: number) => {
     const newAppearance: Appearance = Object.assign({}, state.appearance, {
       timeFormat: value
     })
@@ -98,8 +111,8 @@ const actions: ActionTree<AppearanceState, RootState> = {
     dispatch('App/loadPreferences', null, { root: true })
     commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
   },
-  updateCustomThemeColor: async ({ dispatch, state, commit }, value: object) => {
-    const newCustom: ThemeColorType = Object.assign({}, state.appearance.customThemeColor, value)
+  [ACTION_TYPES.UPDATE_CUSTOM_THEME_COLOR]: async ({ dispatch, state, commit }, value: object) => {
+    const newCustom: ThemeColorType = Object.assign({}, toRaw(state.appearance.customThemeColor), value)
     const newAppearance: Appearance = Object.assign({}, state.appearance, {
       customThemeColor: newCustom
     })
@@ -110,7 +123,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
     dispatch('App/loadPreferences', null, { root: true })
   },
-  updateFont: async ({ dispatch, state, commit }, value: string) => {
+  [ACTION_TYPES.UPDATE_FONT]: async ({ dispatch, state, commit }, value: string) => {
     const newAppearance: Appearance = Object.assign({}, state.appearance, {
       font: value
     })
@@ -121,7 +134,7 @@ const actions: ActionTree<AppearanceState, RootState> = {
     commit(MUTATION_TYPES.UPDATE_APPEARANCE, conf.appearance)
     dispatch('App/loadPreferences', null, { root: true })
   },
-  updateTootPadding: async ({ dispatch, state, commit }, value: number) => {
+  [ACTION_TYPES.UPDATE_TOOT_PADDING]: async ({ dispatch, state, commit }, value: number) => {
     const newAppearance: Appearance = Object.assign({}, state.appearance, {
       tootPadding: value
     })