diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 748abe1..dfb3508 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1090,9 +1090,9 @@
       }
     },
     "node_modules/immutable": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.2.tgz",
-      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA=="
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.3.tgz",
+      "integrity": "sha512-808ZFYMsIRAjLAu5xkKo0TsbY9LBy9H5MazTKIEHerNkg0ymgilGfBPMR/3G7d/ihGmuK2Hw8S1izY2d3kd3wA=="
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
@@ -2720,9 +2720,9 @@
       "dev": true
     },
     "immutable": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.2.tgz",
-      "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA=="
+      "version": "4.3.3",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.3.tgz",
+      "integrity": "sha512-808ZFYMsIRAjLAu5xkKo0TsbY9LBy9H5MazTKIEHerNkg0ymgilGfBPMR/3G7d/ihGmuK2Hw8S1izY2d3kd3wA=="
     },
     "is-binary-path": {
       "version": "2.1.0",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ed54e4f..5564445 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -11,11 +11,11 @@ import AddFieldsDialog from './components/dialogs/AddFieldsDialog.vue'
 import AppContent from './AppContent.vue'
 import GroupDialog from './components/dialogs/GroupDialog.vue'
 import DeleteKeyDialog from './components/dialogs/DeleteKeyDialog.vue'
-import { computed, onBeforeMount, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import usePreferencesStore from './stores/preferences.js'
 import useConnectionStore from './stores/connections.js'
 import { useI18n } from 'vue-i18n'
-import { darkTheme, lightTheme, useOsTheme } from 'naive-ui'
+import { darkTheme } from 'naive-ui'
 import KeyFilterDialog from './components/dialogs/KeyFilterDialog.vue'
 import { WindowSetDarkTheme, WindowSetLightTheme } from 'wailsjs/runtime/runtime.js'
 import { themeOverrides } from '@/utils/theme.js'
@@ -27,12 +27,10 @@ const prefStore = usePreferencesStore()
 const connectionStore = useConnectionStore()
 const i18n = useI18n()
 const initializing = ref(false)
-onBeforeMount(async () => {
+onMounted(async () => {
     try {
         initializing.value = true
-        await prefStore.loadPreferences()
         i18n.locale.value = prefStore.currentLanguage
-        await prefStore.loadFontList()
         await connectionStore.initConnections()
         if (prefStore.autoCheckUpdate) {
             prefStore.checkForUpdate()
@@ -42,27 +40,17 @@ onBeforeMount(async () => {
     }
 })
 
-const osTheme = useOsTheme()
-const theme = computed(() => {
-    if (prefStore.general.theme === 'auto') {
-        if (osTheme.value === 'dark') {
-            WindowSetDarkTheme()
-            return darkTheme
-        }
-    } else if (prefStore.general.theme === 'dark') {
-        WindowSetDarkTheme()
-        return darkTheme
-    }
-    WindowSetLightTheme()
-    return lightTheme
-})
+watch(
+    () => prefStore.isDark,
+    (isDark) => (isDark ? WindowSetDarkTheme() : WindowSetLightTheme()),
+)
 </script>
 
 <template>
     <n-config-provider
         :hljs="hljs"
         :inline-theme-disabled="true"
-        :theme="theme"
+        :theme="prefStore.isDark ? darkTheme : undefined"
         :theme-overrides="themeOverrides"
         class="fill-height"
     >
diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index a315552..13fd44f 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -11,7 +11,6 @@ import useTabStore from 'stores/tab.js'
 import { useDialog } from 'naive-ui'
 import useConnectionStore from 'stores/connections.js'
 import { useI18n } from 'vue-i18n'
-import { useConfirmDialog } from '@/utils/confirm_dialog.js'
 import ContentServerStatus from '@/components/content_value/ContentServerStatus.vue'
 import ContentValueStream from '@/components/content_value/ContentValueStream.vue'
 
@@ -125,9 +124,8 @@ const onReloadKey = async () => {
 }
 
 const i18n = useI18n()
-const confirmDialog = useConfirmDialog()
 const onCloseTab = (tabIndex) => {
-    confirmDialog.warning(i18n.t('close_confirm'), () => {
+    $dialog.warning(i18n.t('close_confirm'), () => {
         const tab = get(tabStore.tabs, tabIndex)
         if (tab != null) {
             connectionStore.closeConnection(tab.name)
diff --git a/frontend/src/components/content_value/ContentToolbar.vue b/frontend/src/components/content_value/ContentToolbar.vue
index 2766588..3c21cc1 100644
--- a/frontend/src/components/content_value/ContentToolbar.vue
+++ b/frontend/src/components/content_value/ContentToolbar.vue
@@ -9,10 +9,8 @@ import RedisTypeTag from '@/components/common/RedisTypeTag.vue'
 import { useI18n } from 'vue-i18n'
 import IconButton from '@/components/common/IconButton.vue'
 import useConnectionStore from 'stores/connections.js'
-import { useConfirmDialog } from '@/utils/confirm_dialog.js'
 import Copy from '@/components/icons/Copy.vue'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
-import { useMessage } from '@/utils/message.js'
 
 const props = defineProps({
     server: String,
@@ -33,7 +31,6 @@ const props = defineProps({
 
 const dialogStore = useDialog()
 const connectionStore = useConnectionStore()
-const message = useMessage()
 const i18n = useI18n()
 
 const onReloadKey = () => {
@@ -44,20 +41,19 @@ const onCopyKey = () => {
     ClipboardSetText(props.keyPath)
         .then((succ) => {
             if (succ) {
-                message.success(i18n.t('copy_succ'))
+                $message.success(i18n.t('copy_succ'))
             }
         })
         .catch((e) => {
-            message.error(e.message)
+            $message.error(e.message)
         })
 }
 
-const confirmDialog = useConfirmDialog()
 const onDeleteKey = () => {
-    confirmDialog.warning(i18n.t('remove_tip', { name: props.keyPath }), () => {
+    $dialog.warning(i18n.t('remove_tip', { name: props.keyPath }), () => {
         connectionStore.deleteKey(props.server, props.db, props.keyPath).then((success) => {
             if (success) {
-                message.success(i18n.t('delete_key_succ', { key: props.keyPath }))
+                $message.success(i18n.t('delete_key_succ', { key: props.keyPath }))
             }
         })
     })
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 71e1868..422b17f 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -8,10 +8,8 @@ import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
 import useConnectionStore from 'stores/connections.js'
-import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -125,7 +123,7 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('delete_key_succ', { key: row.key }))
+                        $message.success(i18n.t('delete_key_succ', { key: row.key }))
                         // update display value
                         // if (!isEmpty(removed)) {
                         //     for (const elem of removed) {
@@ -133,10 +131,10 @@ const actionColumn = {
                         //     }
                         // }
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 }
             },
             onSave: async () => {
@@ -151,7 +149,7 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('save_value_succ'))
+                        $message.success(i18n.t('save_value_succ'))
                         // update display value
                         // if (!isEmpty(updated)) {
                         //     for (const key in updated) {
@@ -159,10 +157,10 @@ const actionColumn = {
                         //     }
                         // }
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 } finally {
                     currentEditRow.value.no = 0
                 }
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 5793991..b22f471 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -9,10 +9,8 @@ import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
 import useConnectionStore from 'stores/connections.js'
-import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -82,16 +80,16 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('delete_key_succ', { key: '#' + row.no }))
+                        $message.success(i18n.t('delete_key_succ', { key: '#' + row.no }))
                         // update display value
                         // if (!isEmpty(removed)) {
                         //     props.value.splice(removed[0], 1)
                         // }
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 }
             },
             onSave: async () => {
@@ -105,7 +103,7 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('save_value_succ'))
+                        $message.success(i18n.t('save_value_succ'))
                         // update display value
                         // if (!isEmpty(updated)) {
                         //     for (const key in updated) {
@@ -113,10 +111,10 @@ const actionColumn = {
                         //     }
                         // }
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 } finally {
                     currentEditRow.value.no = 0
                 }
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 9d04d10..6b0b0ab 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -9,10 +9,8 @@ import useDialogStore from 'stores/dialog.js'
 import { types, types as redisTypes } from '@/consts/support_redis_type.js'
 import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useConnectionStore from 'stores/connections.js'
-import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -84,14 +82,14 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('delete_key_succ', { key: row.value }))
+                        $message.success(i18n.t('delete_key_succ', { key: row.value }))
                         // update display value
                         // props.value.splice(row.no - 1, 1)
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 }
             },
             onSave: async () => {
@@ -105,14 +103,14 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('save_value_succ'))
+                        $message.success(i18n.t('save_value_succ'))
                         // update display value
                         // props.value[row.no - 1] = currentEditRow.value.value
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 } finally {
                     currentEditRow.value.no = 0
                 }
diff --git a/frontend/src/components/content_value/ContentValueStream.vue b/frontend/src/components/content_value/ContentValueStream.vue
index 6f793ee..e156c04 100644
--- a/frontend/src/components/content_value/ContentValueStream.vue
+++ b/frontend/src/components/content_value/ContentValueStream.vue
@@ -9,10 +9,8 @@ import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import useDialogStore from 'stores/dialog.js'
 import useConnectionStore from 'stores/connections.js'
 import { includes, keys, some, values } from 'lodash'
-import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -92,7 +90,7 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('delete_key_succ', { key: row.id }))
+                        $message.success(i18n.t('delete_key_succ', { key: row.id }))
                         // update display value
                         // if (!isEmpty(removed)) {
                         //     for (const elem of removed) {
@@ -100,10 +98,10 @@ const actionColumn = {
                         //     }
                         // }
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 }
             },
         })
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index f6fffbe..3f92aac 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/frontend/src/components/content_value/ContentValueString.vue
@@ -13,10 +13,8 @@ import { types as redisTypes } from '@/consts/support_redis_type.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import { toLower } from 'lodash'
 import useConnectionStore from 'stores/connections.js'
-import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-const message = useMessage()
 const themeVars = useThemeVars()
 
 const props = defineProps({
@@ -117,11 +115,11 @@ const onCopyValue = () => {
     ClipboardSetText(viewValue.value)
         .then((succ) => {
             if (succ) {
-                message.success(i18n.t('copy_succ'))
+                $message.success(i18n.t('copy_succ'))
             }
         })
         .catch((e) => {
-            message.error(e.message)
+            $message.error(e.message)
         })
 }
 
@@ -154,12 +152,12 @@ const onSaveValue = async () => {
         )
         if (success) {
             await connectionStore.loadKeyValue(props.name, props.db, props.keyPath)
-            message.success(i18n.t('save_value_succ'))
+            $message.success(i18n.t('save_value_succ'))
         } else {
-            message.error(msg)
+            $message.error(msg)
         }
     } catch (e) {
-        message.error(e.message)
+        $message.error(e.message)
     } finally {
         inEdit.value = false
         saving.value = false
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index c64ed71..4e194cc 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -9,10 +9,8 @@ import EditableTableColumn from '@/components/common/EditableTableColumn.vue'
 import { isEmpty } from 'lodash'
 import useDialogStore from 'stores/dialog.js'
 import useConnectionStore from 'stores/connections.js'
-import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
-const message = useMessage()
 const props = defineProps({
     name: String,
     db: Number,
@@ -155,19 +153,19 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('delete_key_succ', { key: row.value }))
+                        $message.success(i18n.t('delete_key_succ', { key: row.value }))
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 }
             },
             onSave: async () => {
                 try {
                     const newValue = currentEditRow.value.value
                     if (isEmpty(newValue)) {
-                        message.error(i18n.t('spec_field_required', { key: i18n.t('value') }))
+                        $message.error(i18n.t('spec_field_required', { key: i18n.t('value') }))
                         return
                     }
                     const { success, msg } = await connectionStore.updateZSetItem(
@@ -180,12 +178,12 @@ const actionColumn = {
                     )
                     if (success) {
                         connectionStore.loadKeyValue(props.name, props.db, props.keyPath).then((r) => {})
-                        message.success(i18n.t('save_value_succ'))
+                        $message.success(i18n.t('save_value_succ'))
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 } catch (e) {
-                    message.error(e.message)
+                    $message.error(e.message)
                 } finally {
                     currentEditRow.value.no = 0
                 }
diff --git a/frontend/src/components/dialogs/AddFieldsDialog.vue b/frontend/src/components/dialogs/AddFieldsDialog.vue
index 89c6052..3fb053f 100644
--- a/frontend/src/components/dialogs/AddFieldsDialog.vue
+++ b/frontend/src/components/dialogs/AddFieldsDialog.vue
@@ -5,7 +5,6 @@ import useDialog from 'stores/dialog'
 import NewStringValue from '@/components/new_value/NewStringValue.vue'
 import NewSetValue from '@/components/new_value/NewSetValue.vue'
 import { useI18n } from 'vue-i18n'
-import { useMessage } from '@/utils/message.js'
 import AddListValue from '@/components/new_value/AddListValue.vue'
 import AddHashValue from '@/components/new_value/AddHashValue.vue'
 import AddZSetValue from '@/components/new_value/AddZSetValue.vue'
@@ -78,7 +77,6 @@ watch(
 )
 
 const connectionStore = useConnectionStore()
-const message = useMessage()
 const onAdd = async () => {
     try {
         const { server, db, key, type } = newForm
@@ -100,9 +98,9 @@ const onAdd = async () => {
                         if (newForm.reload) {
                             connectionStore.loadKeyValue(server, db, key).then(() => {})
                         }
-                        message.success(i18n.t('handle_succ'))
+                        $message.success(i18n.t('handle_succ'))
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 }
                 break
@@ -114,9 +112,9 @@ const onAdd = async () => {
                         if (newForm.reload) {
                             connectionStore.loadKeyValue(server, db, key).then(() => {})
                         }
-                        message.success(i18n.t('handle_succ'))
+                        $message.success(i18n.t('handle_succ'))
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 }
                 break
@@ -128,9 +126,9 @@ const onAdd = async () => {
                         if (newForm.reload) {
                             connectionStore.loadKeyValue(server, db, key).then(() => {})
                         }
-                        message.success(i18n.t('handle_succ'))
+                        $message.success(i18n.t('handle_succ'))
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 }
                 break
@@ -142,9 +140,9 @@ const onAdd = async () => {
                         if (newForm.reload) {
                             connectionStore.loadKeyValue(server, db, key).then(() => {})
                         }
-                        message.success(i18n.t('handle_succ'))
+                        $message.success(i18n.t('handle_succ'))
                     } else {
-                        message.error(msg)
+                        $message.error(msg)
                     }
                 }
                 break
@@ -163,9 +161,9 @@ const onAdd = async () => {
                             if (newForm.reload) {
                                 connectionStore.loadKeyValue(server, db, key).then(() => {})
                             }
-                            message.success(i18n.t('handle_succ'))
+                            $message.success(i18n.t('handle_succ'))
                         } else {
-                            message.error(msg)
+                            $message.error(msg)
                         }
                     }
                 }
@@ -173,7 +171,7 @@ const onAdd = async () => {
         }
         dialogStore.closeAddFieldsDialog()
     } catch (e) {
-        message.error(e.message)
+        $message.error(e.message)
     }
 }
 
diff --git a/frontend/src/components/dialogs/ConnectionDialog.vue b/frontend/src/components/dialogs/ConnectionDialog.vue
index 700a7f1..178002b 100644
--- a/frontend/src/components/dialogs/ConnectionDialog.vue
+++ b/frontend/src/components/dialogs/ConnectionDialog.vue
@@ -4,7 +4,6 @@ import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { TestConnection } from 'wailsjs/go/services/connectionService.js'
 import useDialog from 'stores/dialog'
-import { useMessage } from '@/utils/message.js'
 import Close from '@/components/icons/Close.vue'
 import useConnectionStore from 'stores/connections.js'
 
@@ -14,7 +13,6 @@ import useConnectionStore from 'stores/connections.js'
 
 const dialogStore = useDialog()
 const connectionStore = useConnectionStore()
-const message = useMessage()
 const i18n = useI18n()
 
 const editName = ref('')
@@ -74,11 +72,11 @@ const onSaveConnection = async () => {
     // store new connection
     const { success, msg } = await connectionStore.saveConnection(editName.value, generalForm.value)
     if (!success) {
-        message.error(msg)
+        $message.error(msg)
         return
     }
 
-    message.success(i18n.t('handle_succ'))
+    $message.success(i18n.t('handle_succ'))
     onClose()
 }
 
diff --git a/frontend/src/components/dialogs/DeleteKeyDialog.vue b/frontend/src/components/dialogs/DeleteKeyDialog.vue
index 1683923..493053e 100644
--- a/frontend/src/components/dialogs/DeleteKeyDialog.vue
+++ b/frontend/src/components/dialogs/DeleteKeyDialog.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
-import { useMessage } from '@/utils/message.js'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
 import { isEmpty, size } from 'lodash'
@@ -49,16 +48,15 @@ const resetAffected = () => {
 }
 
 const i18n = useI18n()
-const message = useMessage()
 const onConfirmDelete = async () => {
     try {
         const { server, db, key } = deleteForm
         const success = await connectionStore.deleteKeyPrefix(server, db, key)
         if (success) {
-            message.success(i18n.t('handle_succ'))
+            $message.success(i18n.t('handle_succ'))
         }
     } catch (e) {
-        message.error(e.message)
+        $message.error(e.message)
     }
     dialogStore.closeDeleteKeyDialog()
 }
diff --git a/frontend/src/components/dialogs/GroupDialog.vue b/frontend/src/components/dialogs/GroupDialog.vue
index 536e178..d3fb6dd 100644
--- a/frontend/src/components/dialogs/GroupDialog.vue
+++ b/frontend/src/components/dialogs/GroupDialog.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { computed, reactive, ref, watch } from 'vue'
 import useDialog from 'stores/dialog'
-import { useMessage } from '@/utils/message.js'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
 import { isEmpty } from 'lodash'
@@ -29,27 +28,26 @@ watch(
 )
 
 const i18n = useI18n()
-const message = useMessage()
 const onConfirm = async () => {
     try {
         const { name } = groupForm
         if (isRenameMode.value) {
             const { success, msg } = await connectionStore.renameGroup(editGroup.value, name)
             if (success) {
-                message.success(i18n.t('handle_succ'))
+                $message.success(i18n.t('handle_succ'))
             } else {
-                message.error(msg)
+                $message.error(msg)
             }
         } else {
             const { success, msg } = await connectionStore.createGroup(name)
             if (success) {
-                message.success(i18n.t('handle_succ'))
+                $message.success(i18n.t('handle_succ'))
             } else {
-                message.error(msg)
+                $message.error(msg)
             }
         }
     } catch (e) {
-        message.error(e.message)
+        $message.error(e.message)
     }
     onClose()
 }
diff --git a/frontend/src/components/dialogs/NewKeyDialog.vue b/frontend/src/components/dialogs/NewKeyDialog.vue
index a3ecd0d..361441c 100644
--- a/frontend/src/components/dialogs/NewKeyDialog.vue
+++ b/frontend/src/components/dialogs/NewKeyDialog.vue
@@ -13,7 +13,6 @@ import useConnectionStore from 'stores/connections.js'
 import { NSpace } from 'naive-ui'
 import useTabStore from 'stores/tab.js'
 import NewStreamValue from '@/components/new_value/NewStreamValue.vue'
-import { useMessage } from '@/utils/message.js'
 
 const i18n = useI18n()
 const newForm = reactive({
@@ -103,13 +102,12 @@ const renderTypeLabel = (option) => {
 
 const connectionStore = useConnectionStore()
 const tabStore = useTabStore()
-const message = useMessage()
 const onAdd = async () => {
     await newFormRef.value?.validate().catch((err) => {
-        message.error(err.message)
+        $message.error(err.message)
     })
     if (subFormRef.value?.validate && !subFormRef.value?.validate()) {
-        message.error(i18n.t('spec_field_required', { key: i18n.t('element') }))
+        $message.error(i18n.t('spec_field_required', { key: i18n.t('element') }))
         return false
     }
     try {
@@ -124,7 +122,7 @@ const onAdd = async () => {
             tabStore.setSelectedKeys(server, nodeKey)
             connectionStore.loadKeyValue(server, db, key).then(() => {})
         } else if (!isEmpty(msg)) {
-            message.error(msg)
+            $message.error(msg)
         }
         dialogStore.closeNewKeyDialog()
     } catch (e) {}
diff --git a/frontend/src/components/dialogs/PreferencesDialog.vue b/frontend/src/components/dialogs/PreferencesDialog.vue
index 5d4c73f..666900e 100644
--- a/frontend/src/components/dialogs/PreferencesDialog.vue
+++ b/frontend/src/components/dialogs/PreferencesDialog.vue
@@ -3,7 +3,6 @@ import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import useDialog from 'stores/dialog'
 import usePreferencesStore from 'stores/preferences.js'
-import { useMessage } from '@/utils/message.js'
 
 const prefStore = usePreferencesStore()
 
@@ -11,7 +10,6 @@ const prevPreferences = ref({})
 const tab = ref('general')
 const dialogStore = useDialog()
 const i18n = useI18n()
-const message = useMessage()
 const loading = ref(false)
 
 const initPreferences = async () => {
@@ -41,7 +39,7 @@ watch(
 const onSavePreferences = async () => {
     const success = await prefStore.savePreferences()
     if (success) {
-        message.success(i18n.t('handle_succ'))
+        $message.success(i18n.t('handle_succ'))
         dialogStore.closePreferencesDialog()
     }
 }
diff --git a/frontend/src/components/dialogs/RenameKeyDialog.vue b/frontend/src/components/dialogs/RenameKeyDialog.vue
index 757c3dc..a1830b4 100644
--- a/frontend/src/components/dialogs/RenameKeyDialog.vue
+++ b/frontend/src/components/dialogs/RenameKeyDialog.vue
@@ -1,7 +1,6 @@
 <script setup>
 import { reactive, watch } from 'vue'
 import useDialog from 'stores/dialog'
-import { useMessage } from '@/utils/message.js'
 import { useI18n } from 'vue-i18n'
 import useConnectionStore from 'stores/connections.js'
 
@@ -28,19 +27,18 @@ watch(
 )
 
 const i18n = useI18n()
-const message = useMessage()
 const onRename = async () => {
     try {
         const { server, db, key, newKey } = renameForm
         const { success, msg } = await connectionStore.renameKey(server, db, key, newKey)
         if (success) {
             await connectionStore.loadKeyValue(server, db, newKey)
-            message.success(i18n.t('handle_succ'))
+            $message.success(i18n.t('handle_succ'))
         } else {
-            message.error(msg)
+            $message.error(msg)
         }
     } catch (e) {
-        message.error(e.message)
+        $message.error(e.message)
     }
     dialogStore.closeRenameKeyDialog()
 }
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 0c90ef1..fb97a6a 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -15,7 +15,6 @@ import Connect from '@/components/icons/Connect.vue'
 import useDialogStore from 'stores/dialog.js'
 import { ClipboardSetText } from 'wailsjs/runtime/runtime.js'
 import useConnectionStore from 'stores/connections.js'
-import { useConfirmDialog } from '@/utils/confirm_dialog.js'
 import ToggleServer from '@/components/icons/ToggleServer.vue'
 import Unlink from '@/components/icons/Unlink.vue'
 import Filter from '@/components/icons/Filter.vue'
@@ -23,7 +22,6 @@ import Close from '@/components/icons/Close.vue'
 import { typesBgColor, typesColor } from '@/consts/support_redis_type.js'
 import useTabStore from 'stores/tab.js'
 import IconButton from '@/components/common/IconButton.vue'
-import { useMessage } from '@/utils/message.js'
 
 const props = defineProps({
     server: String,
@@ -219,7 +217,6 @@ const expandKey = (key) => {
     }
 }
 
-const confirmDialog = useConfirmDialog()
 const handleSelectContextMenu = (key) => {
     contextMenuParam.show = false
     const selectedKey = get(selectedKeys.value, 0)
@@ -233,7 +230,7 @@ const handleSelectContextMenu = (key) => {
             expandedKeys.value = [props.server]
             tabStore.setSelectedKeys(props.server)
             connectionStore.openConnection(props.server, true).then(() => {
-                message.success(i18n.t('reload_succ'))
+                $message.success(i18n.t('reload_succ'))
             })
             break
         case 'server_close':
@@ -267,10 +264,10 @@ const handleSelectContextMenu = (key) => {
             dialogStore.openDeleteKeyDialog(props.server, db, isEmpty(redisKey) ? '*' : redisKey + ':*')
             break
         case 'value_remove':
-            confirmDialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
+            $dialog.warning(i18n.t('remove_tip', { name: redisKey }), () => {
                 connectionStore.deleteKey(props.server, db, redisKey).then((success) => {
                     if (success) {
-                        message.success(i18n.t('delete_key_succ', { key: redisKey }))
+                        $message.success(i18n.t('delete_key_succ', { key: redisKey }))
                     }
                 })
             })
@@ -280,11 +277,11 @@ const handleSelectContextMenu = (key) => {
             ClipboardSetText(redisKey)
                 .then((succ) => {
                     if (succ) {
-                        message.success(i18n.t('copy_succ'))
+                        $message.success(i18n.t('copy_succ'))
                     }
                 })
                 .catch((e) => {
-                    message.error(e.message)
+                    $message.error(e.message)
                 })
             break
         default:
@@ -295,7 +292,6 @@ defineExpose({
     handleSelectContextMenu,
 })
 
-const message = useMessage()
 const dialog = useDialog()
 const onUpdateExpanded = (value, option, meta) => {
     expandedKeys.value = value
@@ -566,7 +562,7 @@ const onLoadTree = async (node) => {
             try {
                 await connectionStore.openDatabase(props.server, node.db)
             } catch (e) {
-                message.error(e.message)
+                $message.error(e.message)
                 node.isLeaf = undefined
             } finally {
                 loading.value = false
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index ee3313f..ba874ea 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -15,8 +15,6 @@ import Connect from '@/components/icons/Connect.vue'
 import { useI18n } from 'vue-i18n'
 import useTabStore from 'stores/tab.js'
 import Edit from '@/components/icons/Edit.vue'
-import { useConfirmDialog } from '@/utils/confirm_dialog.js'
-import { useMessage } from '@/utils/message.js'
 
 const themeVars = useThemeVars()
 const i18n = useI18n()
@@ -24,7 +22,6 @@ const openingConnection = ref(false)
 const connectionStore = useConnectionStore()
 const tabStore = useTabStore()
 const dialogStore = useDialogStore()
-const message = useMessage()
 
 const expandedKeys = ref([])
 const selectedKeys = ref([])
@@ -187,7 +184,7 @@ const openConnection = async (name) => {
             server: name,
         })
     } catch (e) {
-        message.error(e.message)
+        $message.error(e.message)
         // node.isLeaf = undefined
     } finally {
         openingConnection.value = false
@@ -196,21 +193,20 @@ const openConnection = async (name) => {
 
 const dialog = useDialog()
 const removeConnection = (name) => {
-    confirmDialog.warning(i18n.t('remove_tip', { type: i18n.t('conn_name'), name }), async () => {
+    $dialog.warning(i18n.t('remove_tip', { type: i18n.t('conn_name'), name }), async () => {
         connectionStore.deleteConnection(name).then(({ success, msg }) => {
             if (!success) {
-                message.error(msg)
+                $message.error(msg)
             }
         })
     })
 }
 
-const confirmDialog = useConfirmDialog()
 const removeGroup = async (name) => {
-    confirmDialog.warning(i18n.t('remove_tip', { type: i18n.t('conn_group'), name }), async () => {
+    $dialog.warning(i18n.t('remove_tip', { type: i18n.t('conn_group'), name }), async () => {
         connectionStore.deleteGroup(name).then(({ success, msg }) => {
             if (!success) {
-                message.error(msg)
+                $message.error(msg)
             }
         })
     })
@@ -268,7 +264,7 @@ const handleSelectContextMenu = (key) => {
         case 'server_edit':
             // ask for close relevant connections before edit
             if (connectionStore.isConnected(name)) {
-                confirmDialog.warning(i18n.t('edit_close_confirm'), () => {
+                $dialog.warning(i18n.t('edit_close_confirm'), () => {
                     connectionStore.closeConnection(name)
                     dialogStore.openEditDialog(name)
                 })
diff --git a/frontend/src/main.js b/frontend/src/main.js
index d228690..8192c13 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,11 +6,21 @@ import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { i18n } from '@/utils/i18n.js'
+import { setupDiscreteApi } from '@/utils/discrete.js'
+import usePreferencesStore from 'stores/preferences.js'
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
 
-const app = createApp(App)
-app.use(i18n)
-app.use(createPinia())
-app.mount('#app')
+async function setupApp() {
+    const app = createApp(App)
+    app.use(i18n)
+    app.use(createPinia())
+
+    const prefStore = usePreferencesStore()
+    await prefStore.loadPreferences()
+    await setupDiscreteApi()
+    app.mount('#app')
+}
+
+setupApp()
diff --git a/frontend/src/stores/preferences.js b/frontend/src/stores/preferences.js
index 58e4f71..b5e383a 100644
--- a/frontend/src/stores/preferences.js
+++ b/frontend/src/stores/preferences.js
@@ -7,11 +7,11 @@ import {
     RestorePreferences,
     SetPreferences,
 } from 'wailsjs/go/services/preferencesService.js'
-import { useMessage } from '@/utils/message.js'
-import { useConfirmDialog } from '@/utils/confirm_dialog.js'
 import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
 import { i18nGlobal } from '@/utils/i18n.js'
+import { useOsTheme } from 'naive-ui'
 
+const osTheme = useOsTheme()
 const usePreferencesStore = defineStore('preferences', {
     /**
      * @typedef {Object} FontItem
@@ -132,6 +132,18 @@ const usePreferencesStore = defineStore('preferences', {
             return lang || 'en'
         },
 
+        isDark() {
+            const th = get(this.general, 'theme', 'auto')
+            if (th === 'auto') {
+                if (osTheme.value === 'dark') {
+                    return true
+                }
+            } else if (th === 'dark') {
+                return true
+            }
+            return false
+        },
+
         autoCheckUpdate() {
             return get(this.general, 'checkUpdate', false)
         },
@@ -222,11 +234,9 @@ const usePreferencesStore = defineStore('preferences', {
         },
 
         async checkForUpdate(manual = false) {
-            const message = useMessage()
-            const confirmDialog = useConfirmDialog()
             let msgRef = null
             if (manual) {
-                msgRef = message.loading('Retrieving for new version', { duration: 0 })
+                msgRef = $message.loading('Retrieving for new version', { duration: 0 })
             }
             let respObj = null
             try {
@@ -243,12 +253,12 @@ const usePreferencesStore = defineStore('preferences', {
 
             // TODO: check current version is older then remote
             if (respObj != null && !isEmpty(respObj['html_url'])) {
-                confirmDialog.warning(i18nGlobal.t('new_version_tip'), () => {
+                $dialog.warning(i18nGlobal.t('new_version_tip'), () => {
                     BrowserOpenURL(respObj['html_url'])
                 })
             } else {
                 if (manual) {
-                    message.info(i18nGlobal.t('no_update'))
+                    $message.info(i18nGlobal.t('no_update'))
                 }
             }
         },
diff --git a/frontend/src/utils/confirm_dialog.js b/frontend/src/utils/confirm_dialog.js
deleted file mode 100644
index 7ae1f19..0000000
--- a/frontend/src/utils/confirm_dialog.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createDiscreteApi } from 'naive-ui'
-import { i18nGlobal } from '@/utils/i18n.js'
-import { themeOverrides } from '@/utils/theme.js'
-
-const { dialog } = createDiscreteApi(['dialog'], {
-    configProviderProps: {
-        themeOverrides,
-    },
-})
-
-export function useConfirmDialog() {
-    return {
-        warning: (content, onConfirm) => {
-            dialog.warning({
-                title: i18nGlobal.t('warning'),
-                content: content,
-                closable: false,
-                autoFocus: false,
-                transformOrigin: 'center',
-                positiveText: i18nGlobal.t('confirm'),
-                negativeText: i18nGlobal.t('cancel'),
-                onPositiveClick: () => {
-                    onConfirm && onConfirm()
-                },
-            })
-        },
-    }
-}
diff --git a/frontend/src/utils/discrete.js b/frontend/src/utils/discrete.js
new file mode 100644
index 0000000..17dc553
--- /dev/null
+++ b/frontend/src/utils/discrete.js
@@ -0,0 +1,60 @@
+import usePreferencesStore from 'stores/preferences.js'
+import { createDiscreteApi, darkTheme } from 'naive-ui'
+import { themeOverrides } from '@/utils/theme.js'
+import { i18nGlobal } from '@/utils/i18n.js'
+import { computed } from 'vue'
+
+function setupMessage(message) {
+    return {
+        error: (content, option = null) => {
+            return message.error(content, option)
+        },
+        info: (content, option = null) => {
+            return message.info(content, option)
+        },
+        loading: (content, option = null) => {
+            return message.loading(content, option)
+        },
+        success: (content, option = null) => {
+            return message.success(content, option)
+        },
+        warning: (content, option = null) => {
+            return message.warning(content, option)
+        },
+    }
+}
+
+function setupDialog(dialog) {
+    return {
+        warning: (content, onConfirm) => {
+            return dialog.warning({
+                title: i18nGlobal.t('warning'),
+                content: content,
+                closable: false,
+                autoFocus: false,
+                transformOrigin: 'center',
+                positiveText: i18nGlobal.t('confirm'),
+                negativeText: i18nGlobal.t('cancel'),
+                onPositiveClick: () => {
+                    onConfirm && onConfirm()
+                },
+            })
+        },
+    }
+}
+
+/**
+ * setup discrete api and bind global component (like dialog, message, alert) to window
+ * @return {Promise<void>}
+ */
+export async function setupDiscreteApi() {
+    const prefStore = usePreferencesStore()
+    const configProviderProps = computed(() => ({
+        theme: prefStore.isDark ? darkTheme : undefined,
+        themeOverrides,
+    }))
+    const { message, dialog } = createDiscreteApi(['message', 'dialog'], { configProviderProps })
+
+    window.$message = setupMessage(message)
+    window.$dialog = setupDialog(dialog)
+}
diff --git a/frontend/src/utils/message.js b/frontend/src/utils/message.js
deleted file mode 100644
index 078294e..0000000
--- a/frontend/src/utils/message.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { createDiscreteApi } from 'naive-ui'
-import { themeOverrides } from '@/utils/theme.js'
-
-const { message } = createDiscreteApi(['message'], {
-    configProviderProps: {
-        themeOverrides,
-    },
-})
-
-export function useMessage() {
-    return {
-        error: (content, option = null) => {
-            return message.error(content, option)
-        },
-        info: (content, option = null) => {
-            return message.info(content, option)
-        },
-        loading: (content, option = null) => {
-            return message.loading(content, option)
-        },
-        success: (content, option = null) => {
-            return message.success(content, option)
-        },
-        warning: (content, option = null) => {
-            return message.warning(content, option)
-        },
-    }
-}