feat(style): 使用Antd组件提供的切换主题功能 (#3051)

invalid w

2023-09-21 dbdd811705b76cd9814afb65e640392e36c9dcce

feat(style): 使用Antd组件提供的切换主题功能 (#3051)

* perf(style): 使用antd4的暗黑主题

* refactor: 抽离切换暗黑主题模式

 src/App.vue

@@ -1,5 +1,5 @@
<template>
  <ConfigProvider :locale="getAntdLocale">
  <ConfigProvider :locale="getAntdLocale" :theme="isDark ? darkTheme : {}">
    <AppProvider>
      <RouterView />
    </AppProvider>
@@ -11,11 +11,15 @@
  import { AppProvider } from '@/components/Application';
  import { useTitle } from '@/hooks/web/useTitle';
  import { useLocale } from '@/locales/useLocale';

  import 'dayjs/locale/zh-cn';
  import { useDarkModeTheme } from '@/hooks/setting/useDarkModeTheme';

  // support Multi-language
  const { getAntdLocale } = useLocale();

  const { isDark, darkTheme } = useDarkModeTheme();

  // Listening to page changes and dynamically changing site titles
  useTitle();
</script>

 src/components/Modal/src/index.less

@@ -64,7 +64,7 @@
  &-close {
    width: auto !important;
    outline: none;
    background: #fff !important;
    background: transparent !important;
    font-weight: normal;
  }


 src/design/dark.less

Diff too large

 src/hooks/setting/useDarkModeTheme.ts

New file
@@ -0,0 +1,18 @@
import { computed } from 'vue';
import { theme } from 'ant-design-vue';
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import { ThemeEnum } from '/@/enums/appEnum';

export function useDarkModeTheme() {
  const { getDarkMode } = useRootSetting();
  const { darkAlgorithm } = theme;
  const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
  const darkTheme = {
    algorithm: [darkAlgorithm],
  };

  return {
    isDark,
    darkTheme,
  };
}