chore: 调整 Naive UI 主题变量
This commit is contained in:
20
src/App.vue
20
src/App.vue
@@ -4,12 +4,13 @@
|
|||||||
:inline-theme-disabled="configProviderProps.inlineThemeDisabled"
|
:inline-theme-disabled="configProviderProps.inlineThemeDisabled"
|
||||||
:locale="configProviderProps.locale"
|
:locale="configProviderProps.locale"
|
||||||
:style="{
|
:style="{
|
||||||
'--color-error': themeVars.errorColor,
|
'--color-error': themeCommon.errorColor,
|
||||||
'--color-info': themeVars.infoColor,
|
'--color-info': themeCommon.infoColor,
|
||||||
'--color-primary': themeVars.primaryColor,
|
'--color-primary': themeCommon.primaryColor,
|
||||||
'--color-success': themeVars.successColor,
|
'--color-success': themeCommon.successColor,
|
||||||
'--color-warning': themeVars.warningColor,
|
'--color-warning': themeCommon.warningColor,
|
||||||
}"
|
}"
|
||||||
|
:theme-overrides="themeOverrides"
|
||||||
>
|
>
|
||||||
|
|
||||||
<!-- Naive UI 全局样式 -->
|
<!-- Naive UI 全局样式 -->
|
||||||
@@ -28,7 +29,7 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {
|
import {
|
||||||
NConfigProvider, NGlobalStyle, useThemeVars,
|
NConfigProvider, NGlobalStyle,
|
||||||
} from 'naive-ui';
|
} from 'naive-ui';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
@@ -37,8 +38,11 @@ import {
|
|||||||
|
|
||||||
import AppAside from './components/AppAside.vue';
|
import AppAside from './components/AppAside.vue';
|
||||||
|
|
||||||
/** 主题变量 */
|
/** 主题变量配置 */
|
||||||
const themeVars = useThemeVars();
|
const themeOverrides = configProviderProps.themeOverrides;
|
||||||
|
|
||||||
|
/** 主题变量配置 - common */
|
||||||
|
const themeCommon = themeOverrides.common;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
<style lang="less">
|
||||||
|
@@ -10,4 +10,30 @@ export const configProviderProps = {
|
|||||||
// 禁用 inline 主题
|
// 禁用 inline 主题
|
||||||
inlineThemeDisabled: true,
|
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',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
};
|
};
|
||||||
|
@@ -131,7 +131,7 @@ onBeforeMount(() => {
|
|||||||
|
|
||||||
&:hover, &.is-active {
|
&:hover, &.is-active {
|
||||||
background-color: #F2F2F2;
|
background-color: #F2F2F2;
|
||||||
color: var(--color-info);
|
color: var(--color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
Reference in New Issue
Block a user