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>
|
||||
<ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
|
||||
<ConfigProvider :locale="getAntdLocale" :theme="themeConfig">
|
||||
<AppProvider>
|
||||
<RouterView />
|
||||
</AppProvider>
|
||||
|
|
@ -7,19 +7,34 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ConfigProvider } from 'ant-design-vue';
|
||||
import { AppProvider } from '@/components/Application';
|
||||
import { useTitle } from '@/hooks/web/useTitle';
|
||||
import { useLocale } from '@/locales/useLocale';
|
||||
import { ConfigProvider } from 'ant-design-vue';
|
||||
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';
|
||||
import 'dayjs/locale/zh-cn';
|
||||
import { computed } from 'vue';
|
||||
|
||||
// support Multi-language
|
||||
const { getAntdLocale } = useLocale();
|
||||
|
||||
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
|
||||
useTitle();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -379,7 +379,7 @@
|
|||
|
||||
&-row__striped {
|
||||
td {
|
||||
background-color: @app-content-background;
|
||||
background-color: @app-content-background !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ export type CustomColorType = {
|
|||
export const customColorList: CustomColorType[] = [
|
||||
{
|
||||
name: '--text-color',
|
||||
light: 'rgb(0,0,0,85%)',
|
||||
light: 'rgba(0 0 0 85%)',
|
||||
dark: '#c9d1d9',
|
||||
},
|
||||
{
|
||||
|
|
@ -30,7 +30,7 @@ export const customColorList: CustomColorType[] = [
|
|||
{
|
||||
name: '--app-content-background-color',
|
||||
light: '#fafafa',
|
||||
dark: '#151515',
|
||||
dark: '#1e1e1e',
|
||||
},
|
||||
// custom example
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue