chore: 调整 Naive UI 主题变量

This commit is contained in:
2024-08-28 13:42:06 +08:00
parent 8b63bb71cc
commit da9fc065c3
3 changed files with 39 additions and 9 deletions

View File

@@ -4,12 +4,13 @@
:inline-theme-disabled="configProviderProps.inlineThemeDisabled"
:locale="configProviderProps.locale"
:style="{
'--color-error': themeVars.errorColor,
'--color-info': themeVars.infoColor,
'--color-primary': themeVars.primaryColor,
'--color-success': themeVars.successColor,
'--color-warning': themeVars.warningColor,
'--color-error': themeCommon.errorColor,
'--color-info': themeCommon.infoColor,
'--color-primary': themeCommon.primaryColor,
'--color-success': themeCommon.successColor,
'--color-warning': themeCommon.warningColor,
}"
:theme-overrides="themeOverrides"
>
<!-- Naive UI 全局样式 -->
@@ -28,7 +29,7 @@
<script setup>
import {
NConfigProvider, NGlobalStyle, useThemeVars,
NConfigProvider, NGlobalStyle,
} from 'naive-ui';
import {
@@ -37,8 +38,11 @@ import {
import AppAside from './components/AppAside.vue';
/** 主题变量 */
const themeVars = useThemeVars();
/** 主题变量配置 */
const themeOverrides = configProviderProps.themeOverrides;
/** 主题变量配置 - common */
const themeCommon = themeOverrides.common;
</script>
<style lang="less">

View File

@@ -10,4 +10,30 @@ export const configProviderProps = {
// 禁用 inline 主题
inlineThemeDisabled: true,
// 调整主题变量
themeOverrides: {
common: {
primaryColor: '#0894FA',
primaryColorHover: '#6BB2FF',
primaryColorPressed: '#007AD3',
primaryColorSuppl: '#6BB2FF',
infoColor: '#0052D9',
infoColorHover: '#366EF4',
infoColorPressed: '#003CAB',
infoColorSuppl: '#366EF4',
successColor: '#00A870',
successColorHover: '#48C79C',
successColorPressed: '#078D5C',
successColorSuppl: '#48C79C',
warningColor: '#ED7B2F',
warningColorHover: '#F2995F',
warningColorPressed: '#D35A21',
warningColorSuppl: '#F2995F',
errorColor: '#E34D59',
errorColorHover: '#F36D78',
errorColorPressed: '#C9353F',
errorColorSuppl: '#F36D78',
},
},
};

View File

@@ -131,7 +131,7 @@ onBeforeMount(() => {
&:hover, &.is-active {
background-color: #F2F2F2;
color: var(--color-info);
color: var(--color-primary);
}
span {