AmandaG 11 mesi fa
parent
commit
c045e67a66

+ 1 - 35
src/main.ts

@@ -23,40 +23,6 @@ import { useThemeStore } from '@/stores/modules/theme'
 
 const app = createApp(App)
 
-// 动态加载暗黑主题
-async function loadDarkTheme() {
-  await import('element-plus/theme-chalk/dark/css-vars.css') // 动态导入暗黑主题
-}
-// 动态移除暗黑主题
-function unloadDarkTheme() {
-  const darkThemeStylesheet = document.getElementById('dark-theme-style')
-  if (darkThemeStylesheet) {
-    darkThemeStylesheet.remove()
-  }
-}
-// 根据用户偏好或系统设置决定是否加载暗黑主题 (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
-if (localStorage.getItem('theme') === 'dark') {
-  loadDarkTheme()
-  document.documentElement.classList.add('dark')
-}
-// 根据用户偏好或系统设置决定是否添加暗黑模式类名
-// if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-//   document.documentElement.classList.add('dark')
-// }
-// 提供一个全局方法来切换主题
-app.config.globalProperties.$toggleDarkMode = () => {
-  const html = document.documentElement
-  if (html.classList.contains('dark')) {
-    unloadDarkTheme()
-    html.classList.remove('dark')
-    localStorage.setItem('theme', 'light')
-  } else {
-    loadDarkTheme()
-    html.classList.add('dark')
-    localStorage.setItem('theme', 'dark')
-  }
-}
-
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
@@ -121,4 +87,4 @@ app.config.globalProperties.$toggleDarkMode = () => {
   }
 }
 
-app.mount('#app')
+app.mount('#app')

+ 4 - 11
src/styles/elementui.scss

@@ -362,21 +362,17 @@ div .el-input__inner {
   font-size: var(--font-size-3);
 }
 .el-input__inner::placeholder {
-<<<<<<< HEAD
-  color: #6c6f75;
-=======
   color: var(--color-neutral-3);
+  font-size: var(--font-size-3);
+}
 div .el-select__placeholder.is-transparent {
+  span {
     color: var(--color-neutral-3) !important;
     font-size: var(--font-size-3);
   }
 }
 div.el-input__wrapper {
-<<<<<<< HEAD
-  box-shadow: 0 0 0 1px var(--color-border) inset;
-=======
   box-shadow: 0 0 0 1px var(--el-border) inset;
->>>>>>> dev
   padding: 0 8px;
 }
 div.el-input div.el-input__wrapper.is-focus {
@@ -766,12 +762,9 @@ div .el-select-dropdown {
 div label.smile_radio .el-radio__inner {
   background-color: var(--management-bg-color);
 }
-<<<<<<< HEAD
-=======
 span.el-radio__inner {
   border: 1px solid var(--el-radio-input-border);
 }
->>>>>>> dev
 div .el-radio__inner:hover {
   border-color: var(--color-theme);
 }
@@ -783,4 +776,4 @@ div .DaterangeClass {
   background-color: var(--management-bg-color) !important;
   border-color: var(--management-bg-color) !important;
   border-radius: 12px !important;
-}
+}

+ 0 - 3
src/styles/theme.scss

@@ -216,12 +216,9 @@
   --color-toggle-btn-module-active-bg: #fff;
 
   --color-user-config-title-bottom-border: #eeeeed;
-<<<<<<< HEAD
-=======
 
   --color-container-status-node-bg: #f8f9fd;
 
->>>>>>> dev
   // 输入框禁用的颜色
   --input-disabled-bg-color: #f5f7fa;
   --input-disabled-text-color: #a8abb2;

+ 1 - 57
src/views/Layout/src/components/Header/HeaderView.vue

@@ -248,62 +248,6 @@ const closePopover = () => {
         </template>
       </el-popover>
 
-      <el-popover
-        placement="bottom-end"
-        :width="400"
-        trigger="click"
-        ref="themePopoverRef"
-        popper-class="toggle-theme-popover"
-      >
-        <div>
-          <div class="header">
-            <span class="title">Themes</span>
-            <el-button @click="themePopoverRef.hide()" class="close-icon el-button--text">
-              <div class="font_family icon-icon_reject_b"></div>
-            </el-button>
-          </div>
-          <div class="tips">
-            Customize your workspace by changing the appearance and theme color
-          </div>
-          <div class="picture-module">
-            <div class="item" :class="{ active: themeStore.theme === 'light' }">
-              <img src="./images/light.png" alt="" />
-              <div v-if="themeStore.theme === 'light'" class="selected-icon">
-                <span class="font_family icon-icon_confirm_b"></span>
-              </div>
-            </div>
-            <div class="item" :class="{ active: themeStore.theme === 'dark' }">
-              <img src="./images/dark.png" alt="" />
-              <div v-if="themeStore.theme === 'dark'" class="selected-icon">
-                <span class="font_family icon-icon_confirm_b"></span>
-              </div>
-            </div>
-          </div>
-          <div class="btn-module">
-            <div
-              class="btn-item"
-              @click="toggleThemeMode('light')"
-              :class="{ active: themeStore.theme === 'light' }"
-            >
-              <span class="font_family icon-icon_light_b"></span>
-              Light
-            </div>
-            <div
-              class="btn-item"
-              @click="toggleThemeMode('dark')"
-              :class="{ active: themeStore.theme === 'dark' }"
-            >
-              <span class="font_family icon-icon_dark_b"></span>Dark
-            </div>
-          </div>
-        </div>
-        <template #reference>
-          <el-button style="height: 40px; width: 40px" class="el-button--text">
-            <span class="font_family icon-icon_themes_b" style="font-size: 16px"></span
-          ></el-button>
-        </template>
-      </el-popover>
-
       <el-popover
         placement="bottom-end"
         :width="256"
@@ -551,4 +495,4 @@ div.el-popover.el-popper.user-config-popover {
 div.el-popper.theme-popper-class {
   padding: 3px 4px;
 }
-</style>
+</style>