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"
|
||||
: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">
|
||||
|
@@ -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',
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
|
@@ -131,7 +131,7 @@ onBeforeMount(() => {
|
||||
|
||||
&:hover, &.is-active {
|
||||
background-color: #F2F2F2;
|
||||
color: var(--color-info);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
span {
|
||||
|
Reference in New Issue
Block a user