feat: support custom theme color and dark mode

perf: replace css variables to theme variables

frontend/src/components/content_value/ContentValueString.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import ContentToolbar from './ContentToolbar.vue'
 import Copy from '../icons/Copy.vue'
 import Save from '../icons/Save.vue'
-import { useMessage } from 'naive-ui'
+import { useMessage, useThemeVars } from 'naive-ui'
 import { types } from '../../consts/value_view_type.js'
 import Close from '../icons/Close.vue'
 import Edit from '../icons/Edit.vue'
@@ -13,6 +13,7 @@ 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'
+const themeVars = useThemeVars()
 
 const props = defineProps({
     name: String,
@@ -215,5 +216,6 @@ const onSaveValue = async () => {
 <style lang="scss" scoped>
 .value-wrapper {
     overflow: hidden;
+    border-top: v-bind('themeVars.borderColor') 1px solid;
 }
 </style>