style: adjusted the light and dark themes

style: add window shadow on macOS #62
This commit is contained in:
tiny-craft 2023-10-28 22:22:48 +08:00
parent 124627d724
commit 6fb0eadfbd
11 changed files with 107 additions and 61 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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
}

View File

@ -1,3 +1,5 @@
import { merge } from 'lodash'
/** /**
* *
* @type import('naive-ui').GlobalThemeOverrides * @type import('naive-ui').GlobalThemeOverrides
@ -12,6 +14,7 @@ export const themeOverrides = {
borderRadiusSmall: '3px', borderRadiusSmall: '3px',
lineHeight: 1.5, lineHeight: 1.5,
scrollbarWidth: '8px', scrollbarWidth: '8px',
tabColor: '#FFFFFF',
}, },
Tag: { Tag: {
// borderRadius: '3px' // borderRadius: '3px'
@ -39,4 +42,27 @@ export const themeOverrides = {
labelTextColor: 'rgb(113,120,128)', labelTextColor: 'rgb(113,120,128)',
labelFontWeight: '450', 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)

View File

@ -53,7 +53,7 @@ func main() {
AssetServer: &assetserver.Options{ AssetServer: &assetserver.Options{
Assets: assets, 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) { OnStartup: func(ctx context.Context) {
sysSvc.Start(ctx) sysSvc.Start(ctx)
connSvc.Start(ctx) connSvc.Start(ctx)
@ -80,7 +80,7 @@ func main() {
Icon: icon, Icon: icon,
}, },
WebviewIsTransparent: false, WebviewIsTransparent: false,
WindowIsTranslucent: false, WindowIsTranslucent: true,
}, },
Windows: &windows.Options{ Windows: &windows.Options{
WebviewIsTransparent: true, WebviewIsTransparent: true,