perf(ConfigProvider): 配置antdv主题色, 使其与modifyVars配置一致 (#3219)
* perf(ConfigProvider): 配置antdv主题, 使其与modifyVars配置一致 * fix(dark): 修正颜色写法 * fix(dark): 修正app-content-background-color深色颜色 * style(BasicTable): row striped style add important --------- Co-authored-by: 苗大 <caoshengmiao@hypergryph.com>
This commit is contained in:
parent
3689bd1cb1
commit
bb3d5b8ae8
21
src/App.vue
21
src/App.vue
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
|
<ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
|
||||||
<AppProvider>
|
<AppProvider>
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</AppProvider>
|
</AppProvider>
|
||||||
|
|
@ -7,19 +7,34 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ConfigProvider } from 'ant-design-vue';
|
|
||||||
import { AppProvider } from '@/components/Application';
|
import { AppProvider } from '@/components/Application';
|
||||||
import { useTitle } from '@/hooks/web/useTitle';
|
import { useTitle } from '@/hooks/web/useTitle';
|
||||||
import { useLocale } from '@/locales/useLocale';
|
import { useLocale } from '@/locales/useLocale';
|
||||||
|
import { ConfigProvider } from 'ant-design-vue';
|
||||||
|
|
||||||
import 'dayjs/locale/zh-cn';
|
|
||||||
import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
|
import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
|
||||||
|
import 'dayjs/locale/zh-cn';
|
||||||
|
import { computed } from 'vue';
|
||||||
|
|
||||||
// support Multi-language
|
// support Multi-language
|
||||||
const { getAntdLocale } = useLocale();
|
const { getAntdLocale } = useLocale();
|
||||||
|
|
||||||
const { isDark, darkTheme } = useDarkModeTheme();
|
const { isDark, darkTheme } = useDarkModeTheme();
|
||||||
|
|
||||||
|
const themeConfig = computed(() =>
|
||||||
|
Object.assign(
|
||||||
|
{
|
||||||
|
token: {
|
||||||
|
colorPrimary: '#0960bd',
|
||||||
|
colorSuccess: '#55D187',
|
||||||
|
colorWarning: '#EFBD47',
|
||||||
|
colorError: '#ED6F6F',
|
||||||
|
colorInfo: '#0960bd',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
isDark.value ? darkTheme : {},
|
||||||
|
),
|
||||||
|
);
|
||||||
// Listening to page changes and dynamically changing site titles
|
// Listening to page changes and dynamically changing site titles
|
||||||
useTitle();
|
useTitle();
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -379,7 +379,7 @@
|
||||||
|
|
||||||
&-row__striped {
|
&-row__striped {
|
||||||
td {
|
td {
|
||||||
background-color: @app-content-background;
|
background-color: @app-content-background !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ export type CustomColorType = {
|
||||||
export const customColorList: CustomColorType[] = [
|
export const customColorList: CustomColorType[] = [
|
||||||
{
|
{
|
||||||
name: '--text-color',
|
name: '--text-color',
|
||||||
light: 'rgb(0,0,0,85%)',
|
light: 'rgba(0 0 0 85%)',
|
||||||
dark: '#c9d1d9',
|
dark: '#c9d1d9',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -30,7 +30,7 @@ export const customColorList: CustomColorType[] = [
|
||||||
{
|
{
|
||||||
name: '--app-content-background-color',
|
name: '--app-content-background-color',
|
||||||
light: '#fafafa',
|
light: '#fafafa',
|
||||||
dark: '#151515',
|
dark: '#1e1e1e',
|
||||||
},
|
},
|
||||||
// custom example
|
// custom example
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue