style: adjusted the light and dark themes

style: add window shadow on macOS #62

frontend/src/App.vue

@@ -18,7 +18,7 @@ import { useI18n } from 'vue-i18n'
 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'
+import { darkThemeOverrides, themeOverrides } from '@/utils/theme.js'
 import AboutDialog from '@/components/dialogs/AboutDialog.vue'
 
 hljs.registerLanguage('json', json)
@@ -60,7 +60,7 @@ watch(
         :inline-theme-disabled="true"
         :locale="prefStore.themeLocale"
         :theme="prefStore.isDark ? darkTheme : undefined"
-        :theme-overrides="themeOverrides"
+        :theme-overrides="prefStore.isDark ? darkThemeOverrides : themeOverrides"
         class="fill-height">
         <n-dialog-provider>
             <app-content :loading="initializing" />

frontend/src/AppContent.vue

@@ -17,6 +17,7 @@ import { EventsOn, WindowIsFullscreen, WindowIsMaximised, WindowToggleMaximise }
 import { isMacOS } from '@/utils/platform.js'
 import iconUrl from '@/assets/images/icon.png'
 import ResizeableWrapper from '@/components/common/ResizeableWrapper.vue'
+import { extraTheme } from '@/utils/extra_theme.js'
 
 const themeVars = useThemeVars()
 
@@ -33,6 +34,9 @@ const tabStore = useTabStore()
 const prefStore = usePreferencesStore()
 const connectionStore = useConnectionStore()
 const logPaneRef = ref(null)
+const exThemeVars = computed(() => {
+    return extraTheme(prefStore.isDark)
+})
 // const preferences = ref({})
 // provide('preferences', preferences)
 
@@ -51,8 +55,7 @@ watch(
 )
 
 const border = computed(() => {
-    const color = isMacOS() && false ? '#0000' : themeVars.value.borderColor
-    return `1px solid ${color}`
+    return isMacOS() ? 'none' : `1px solid ${themeVars.value.borderColor}`
 })
 
 const logoWrapperWidth = computed(() => {
@@ -108,15 +111,9 @@ onMounted(async () => {
     <!-- app content-->
     <n-spin
         :show="props.loading"
-        :style="{ backgroundColor: themeVars.bodyColor, borderRadius: `${borderRadius}px`, border }"
+        :style="{ borderRadius: `${borderRadius}px`, border }"
         :theme-overrides="{ opacitySpinning: 0 }">
-        <div
-            id="app-content-wrapper"
-            :style="{
-                backgroundColor: themeVars.bodyColor,
-                color: themeVars.textColorBase,
-            }"
-            class="flex-box-v">
+        <div id="app-content-wrapper" :style="{ color: themeVars.textColorBase }" class="flex-box-v">
             <!-- title bar -->
             <div
                 id="app-toolbar"
@@ -208,15 +205,16 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 #app-content-wrapper {
-    width: calc(100vw - 2px);
-    height: calc(100vh - 2px);
+    width: 100vw;
+    height: 100vh;
     overflow: hidden;
     box-sizing: border-box;
-    border-radius: 10px;
+    border-radius: 8px;
+    background-color: v-bind('themeVars.bodyColor');
 
     #app-toolbar {
-        background-color: v-bind('themeVars.tabColor');
-        border-bottom: 1px solid v-bind('themeVars.borderColor');
+        background-color: v-bind('exThemeVars.titleColor');
+        border-bottom: 1px solid v-bind('exThemeVars.splitColor');
 
         &-title {
             padding-left: 10px;
@@ -240,31 +238,11 @@ onMounted(async () => {
     .app-side {
         //overflow: hidden;
         height: 100%;
-        background-color: v-bind('themeVars.tabColor');
-        border-right: 1px solid v-bind('themeVars.borderColor');
+        background-color: v-bind('exThemeVars.sidebarColor');
+        border-right: 1px solid v-bind('exThemeVars.splitColor');
     }
 }
 
-.resize-divider {
-    width: 3px;
-    border-right: 1px solid v-bind('themeVars.borderColor');
-}
-
-.resize-divider-hide {
-    background-color: #0000;
-    border-right-color: #0000;
-}
-
-.resize-divider-hover {
-    background-color: v-bind('themeVars.borderColor');
-    border-right-color: v-bind('themeVars.borderColor');
-}
-
-.resize-divider-drag {
-    background-color: v-bind('themeVars.primaryColor');
-    border-right-color: v-bind('themeVars.primaryColor');
-}
-
 .fade-enter-from,
 .fade-leave-to {
     opacity: 0;

frontend/src/components/content/ContentLogPane.vue

@@ -162,6 +162,5 @@ defineExpose({
 .content-container {
     padding: 5px;
     box-sizing: border-box;
-    border-left: 1px solid v-bind('themeVars.borderColor');
 }
 </style>

frontend/src/components/content/ContentPane.vue

@@ -178,14 +178,14 @@ watch(
 
 <style lang="scss">
 .content-sub-tab {
-    background-color: v-bind('themeVars.bodyColor');
+    background-color: v-bind('themeVars.tabColor');
     height: 100%;
 }
 
 .content-sub-tab-pane {
     padding: 0 !important;
     height: 100%;
-    background-color: v-bind('themeVars.tabColor');
+    background-color: v-bind('themeVars.bodyColor');
     overflow: hidden;
 }
 

frontend/src/components/content/ContentValueTab.vue

@@ -6,6 +6,8 @@ import { useI18n } from 'vue-i18n'
 import { get, map } from 'lodash'
 import { useThemeVars } from 'naive-ui'
 import useConnectionStore from 'stores/connections.js'
+import { extraTheme } from '@/utils/extra_theme.js'
+import usePreferencesStore from 'stores/preferences.js'
 
 /**
  * Value content tab on head
@@ -15,6 +17,7 @@ const themeVars = useThemeVars()
 const i18n = useI18n()
 const tabStore = useTabStore()
 const connectionStore = useConnectionStore()
+const prefStore = usePreferencesStore()
 
 const onCloseTab = (tabIndex) => {
     const tab = get(tabStore.tabs, tabIndex)
@@ -47,6 +50,10 @@ const tab = computed(() =>
         label: item.title,
     })),
 )
+
+const exThemeVars = computed(() => {
+    return extraTheme(prefStore.isDark)
+})
 </script>
 
 <template>
@@ -60,7 +67,6 @@ const tab = computed(() =>
             tabGapMediumCard: 0,
             tabGapLargeCard: 0,
             tabColor: '#0000',
-            // tabBorderColor: themeVars.borderColor,
             tabBorderColor: '#0000',
             tabTextColorCard: themeVars.closeIconColor,
         }"
@@ -83,12 +89,12 @@ const tab = computed(() =>
 .value-tab {
     --wails-draggable: none;
     position: relative;
-    border: 1px solid v-bind('themeVars.borderColor') !important;
+    border: 1px solid v-bind('exThemeVars.splitColor') !important;
 }
 
 .value-tab-active {
-    background-color: v-bind('themeVars.bodyColor') !important;
-    border-bottom-color: v-bind('themeVars.bodyColor') !important;
+    background-color: v-bind('themeVars.tabColor') !important;
+    border-bottom-color: v-bind('themeVars.tabColor') !important;
 
     &_mark {
         border-top: 3px solid v-bind('tabMarkColor') !important;
@@ -99,7 +105,7 @@ const tab = computed(() =>
     border-color: #0000 !important;
 
     &:hover {
-        background-color: v-bind('themeVars.borderColor') !important;
+        background-color: v-bind('exThemeVars.splitColor') !important;
     }
 }
 

frontend/src/components/content_value/ContentServerStatus.vue

@@ -112,7 +112,7 @@ const infoFilter = ref('')
     <n-scrollbar ref="scrollRef">
         <n-back-top :listen-to="scrollRef" />
         <n-space :size="5" :wrap-item="false" style="padding: 5px" vertical>
-            <n-card>
+            <n-card embedded>
                 <template #header>
                     <n-space :wrap-item="false" align="center" inline size="small">
                         {{ props.server }}
@@ -184,7 +184,7 @@ const infoFilter = ref('')
                     </n-grid>
                 </n-spin>
             </n-card>
-            <n-card :title="$t('status.all_info')">
+            <n-card :title="$t('status.all_info')" embedded>
                 <template #header-extra>
                     <n-input v-model:value="infoFilter" clearable placeholder="">
                         <template #prefix>

frontend/src/components/content_value/ContentValueWrapper.vue

@@ -69,13 +69,8 @@ const onReloadKey = async () => {
             :size="props.size"
             :ttl="props.ttl"
             :value="props.value"
-            :view-as="props.viewAs"
-            class="content-value-wrapper" />
+            :view-as="props.viewAs" />
     </keep-alive>
 </template>
 
-<style lang="scss" scoped>
-.content-value-wrapper {
-    background-color: v-bind('themeVars.bodyColor');
-}
-</style>
+<style lang="scss" scoped></style>

frontend/src/components/sidebar/NavMenu.vue

@@ -12,6 +12,7 @@ import { BrowserOpenURL } from 'wailsjs/runtime/runtime.js'
 import useConnectionStore from 'stores/connections.js'
 import usePreferencesStore from 'stores/preferences.js'
 import Record from '@/components/icons/Record.vue'
+import { extraTheme } from '@/utils/extra_theme.js'
 
 const themeVars = useThemeVars()
 
@@ -88,14 +89,14 @@ const renderContextLabel = (option) => {
 }
 
 const dialogStore = useDialogStore()
-const preferencesStore = usePreferencesStore()
+const prefStore = usePreferencesStore()
 const onSelectPreferenceMenu = (key) => {
     switch (key) {
         case 'preferences':
             dialogStore.openPreferencesDialog()
             break
         case 'update':
-            preferencesStore.checkForUpdate(true)
+            prefStore.checkForUpdate(true)
             break
         case 'about':
             dialogStore.openAboutDialog()
@@ -106,6 +107,10 @@ const onSelectPreferenceMenu = (key) => {
 const openGithub = () => {
     BrowserOpenURL('https://github.com/tiny-craft/tiny-rdm')
 }
+
+const exThemeVars = computed(() => {
+    return extraTheme(prefStore.isDark)
+})
 </script>
 
 <template>
@@ -139,7 +144,9 @@ const openGithub = () => {
 <style lang="scss">
 #app-nav-menu {
     //height: 100vh;
-    //border-right: v-bind('themeVars.borderColor') solid 1px;
+    border-right: v-bind('exThemeVars.splitColor') solid 1px;
+    background-color: v-bind('exThemeVars.sidebarColor');
+    box-sizing: border-box;
 
     .nav-menu-item {
         align-items: center;

frontend/src/utils/extra_theme.js

@@ -0,0 +1,35 @@
+/**
+ * @typedef ExtraTheme
+ * @property {string} titleColor
+ * @property {string} sidebarColor
+ * @property {string} splitColor
+ */
+
+/**
+ *
+ * @type ExtraTheme
+ */
+export const extraLightTheme = {
+    titleColor: '#F0F0F4',
+    sidebarColor: '#F6F6F6',
+    splitColor: '#E0E0E6',
+}
+
+/**
+ *
+ * @type ExtraTheme
+ */
+export const extraDarkTheme = {
+    titleColor: '#202020',
+    sidebarColor: '#202124',
+    splitColor: '#323138',
+}
+
+/**
+ *
+ * @param {boolean} dark
+ * @return ExtraTheme
+ */
+export const extraTheme = (dark) => {
+    return dark ? extraDarkTheme : extraLightTheme
+}

frontend/src/utils/theme.js

@@ -1,3 +1,5 @@
+import { merge } from 'lodash'
+
 /**
  *
  * @type import('naive-ui').GlobalThemeOverrides
@@ -12,6 +14,7 @@ export const themeOverrides = {
         borderRadiusSmall: '3px',
         lineHeight: 1.5,
         scrollbarWidth: '8px',
+        tabColor: '#FFFFFF',
     },
     Tag: {
         // borderRadius: '3px'
@@ -39,4 +42,27 @@ export const themeOverrides = {
         labelTextColor: 'rgb(113,120,128)',
         labelFontWeight: '450',
     },
+    Radio: {
+        buttonColorActive: '#D13B37',
+        buttonTextColorActive: '#FFF',
+    },
 }
+
+/**
+ *
+ * @type import('naive-ui').GlobalThemeOverrides
+ */
+const _darkThemeOverrides = {
+    common: {
+        bodyColor: '#1A1A1A',
+        tabColor: '#18181C',
+    },
+    Tree: {
+        nodeTextColor: '#ceced0',
+    },
+    Card: {
+        colorEmbedded: '#18181C',
+    },
+}
+
+export const darkThemeOverrides = merge({}, themeOverrides, _darkThemeOverrides)

main.go

@@ -53,7 +53,7 @@ func main() {
 		AssetServer: &assetserver.Options{
 			Assets: assets,
 		},
-		BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 0},
+		BackgroundColour: options.NewRGBA(27, 38, 54, 0),
 		OnStartup: func(ctx context.Context) {
 			sysSvc.Start(ctx)
 			connSvc.Start(ctx)
@@ -80,7 +80,7 @@ func main() {
 				Icon:    icon,
 			},
 			WebviewIsTransparent: false,
-			WindowIsTranslucent:  false,
+			WindowIsTranslucent:  true,
 		},
 		Windows: &windows.Options{
 			WebviewIsTransparent:              true,