fix: fixed DarkMode

kuizuo · Aug 31, 2023 · 6dc21e5 · 6dc21e5
1 parent bd6a29e
commit 6dc21e5
Show file tree

Hide file tree

Showing 6 changed files with 9,787 additions and 103 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -55,7 +55,14 @@
  "**/yarn.lock": true
  },
  "stylelint.enable": true,
- "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
+ "stylelint.validate": [
+ "css",
+ "less",
+ "postcss",
+ "scss",
+ "vue",
+ "sass"
+ ],
  "path-intellisense.mappings": {
  "/@/": "${workspaceRoot}/src"
  },
@@ -87,21 +94,29 @@
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
  },
+ "editor.formatOnSave": false,
  "[vue]": {
  "editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll.stylelint": true
  }
  },
- "i18n-ally.localesPaths": ["src/locales/lang"],
+ "i18n-ally.localesPaths": [
+ "src/locales/lang"
+ ],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  "i18n-ally.namespace": true,
  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
- "i18n-ally.enabledParsers": ["ts"],
+ "i18n-ally.enabledParsers": [
+ "ts"
+ ],
  "i18n-ally.sourceLanguage": "en",
  "i18n-ally.displayLanguage": "zh-CN",
- "i18n-ally.enabledFrameworks": ["vue", "react"],
+ "i18n-ally.enabledFrameworks": [
+ "vue",
+ "react"
+ ],
  "cSpell.words": [
  "vben",
  "browserslist",
@@ -166,4 +181,4 @@
  ".eslintrc.js": ".eslintignore,.prettierignore,.stylelintignore,.commitlintrc.js,.prettierrc.js,.stylelintrc.js"
  },
  "terminal.integrated.scrollback": 10000
-}
+}
diff --git a/apps/admin/src/components/Application/index.ts b/apps/admin/src/components/Application/index.ts
@@ -4,12 +4,12 @@ import appLogo from './src/AppLogo.vue';
 import appProvider from './src/AppProvider.vue';
 import appSearch from './src/search/AppSearch.vue';
 import appLocalePicker from './src/AppLocalePicker.vue';
-// import appDarkModeToggle from './src/AppDarkModeToggle.vue';
+import appDarkModeToggle from './src/AppDarkModeToggle.vue';
 
 export { useAppProviderContext } from './src/useAppContext';
 
 export const AppLogo = withInstall(appLogo);
 export const AppProvider = withInstall(appProvider);
 export const AppSearch = withInstall(appSearch);
 export const AppLocalePicker = withInstall(appLocalePicker);
-// export const AppDarkModeToggle = withInstall(appDarkModeToggle);
+export const AppDarkModeToggle = withInstall(appDarkModeToggle);
diff --git a/apps/admin/src/components/Application/src/AppDarkModeToggle.vue b/apps/admin/src/components/Application/src/AppDarkModeToggle.vue
@@ -6,71 +6,71 @@
  </div>
 </template>
 <script lang="ts" setup>
- import { computed, unref } from 'vue';
- import { SvgIcon } from '/@/components/Icon';
- import { useDesign } from '/@/hooks/web/useDesign';
- import { useRootSetting } from '/@/hooks/setting/useRootSetting';
- import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
- import { updateDarkTheme } from '/@/logics/theme/dark';
- import { ThemeEnum } from '/@/enums/appEnum';
+import { computed, unref } from 'vue';
+import { SvgIcon } from '/@/components/Icon';
+import { useDesign } from '/@/hooks/web/useDesign';
+import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
+import { updateDarkTheme } from '/@/logics/theme/dark';
+import { ThemeEnum } from '/@/enums/appEnum';
 
- const { prefixCls } = useDesign('dark-switch');
- const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
+const { prefixCls } = useDesign('dark-switch');
+const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
 
- const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
+const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
 
- const getClass = computed(() => [
-  prefixCls,
-  {
-  [`${prefixCls}--dark`]: unref(isDark),
-  },
- ]);
+const getClass = computed(() => [
+ prefixCls,
+ {
+ [`${prefixCls}--dark`]: unref(isDark),
+ },
+]);
 
- function toggleDarkMode() {
-  const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
-  setDarkMode(darkMode);
-  updateDarkTheme(darkMode);
-  updateHeaderBgColor();
-  updateSidebarBgColor();
- }
+function toggleDarkMode() {
+ const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
+ setDarkMode(darkMode);
+ updateDarkTheme(darkMode);
+ updateHeaderBgColor();
+ updateSidebarBgColor();
+}
 </script>
 <style lang="less" scoped>
- @prefix-cls: ~'@{namespace}-dark-switch';
+@prefix-cls: ~'@{namespace}-dark-switch';
 
- html[data-theme='dark'] {
- .@{prefix-cls} {
- border: 1px solid rgb(196 188 188);
- }
+html[data-theme='dark'] {
+ .@{prefix-cls} {
+ border: 1px solid rgb(196 188 188);
  }
+}
 
- .@{prefix-cls} {
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: space-between;
-  width: 50px;
-  height: 26px;
-  margin-left: auto;
-  padding: 0 6px;
-  border-radius: 30px;
-  background-color: #151515;
-  cursor: pointer;
+.@{prefix-cls} {
+ display: flex;
+ position: relative;
+ align-items: center;
+ justify-content: space-between;
+ width: 50px;
+ height: 26px;
+ margin-left: auto;
+ padding: 0 6px;
+ border-radius: 30px;
+ background-color: #151515;
+ cursor: pointer;
 
-  &-inner {
-  position: absolute;
-  z-index: 1;
-  width: 18px;
-  height: 18px;
-  transition: transform 0.5s, background-color 0.5s;
-  border-radius: 50%;
-  background-color: #fff;
-  will-change: transform;
-  }
+ &-inner {
+ position: absolute;
+ z-index: 1;
+ width: 18px;
+ height: 18px;
+ transition: transform 0.5s, background-color 0.5s;
+ border-radius: 50%;
+ background-color: #fff;
+ will-change: transform;
+ }
 
- &--dark {
- .@{prefix-cls}-inner {
- transform: translateX(calc(100% + 2px));
- }
+ &--dark {
+ .@{prefix-cls}-inner {
+ transform: translateX(calc(100% + 2px));
  }
  }
+}
 </style>