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>