From 72b47ebe7e2cad9ad236908da2e450d9006d4875 Mon Sep 17 00:00:00 2001
From: wuming230 <1819845645@qq.com>
Date: Mon, 3 Mar 2025 16:30:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E5=88=87=E6=8D=A2=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.ts                     |  6 ++
 docs/.vitepress/public/check-dark-mode-v2.js  | 19 +++++++
 docs/.vitepress/src/NotFound.vue              |  6 +-
 .../.vitepress/src/assets/style/markdown.scss |  3 +-
 .../src/components/FloatingButton.vue         |  6 +-
 .../.vitepress/src/components/ResultEmpty.vue |  6 +-
 .../src/components/header/HeaderTheme.vue     |  1 -
 docs/.vitepress/src/composables/useTheme.ts   | 57 -------------------
 .../src/views/search/TheSearchResult.vue      |  1 +
 9 files changed, 39 insertions(+), 66 deletions(-)
 create mode 100644 docs/.vitepress/public/check-dark-mode-v2.js
 delete mode 100644 docs/.vitepress/src/composables/useTheme.ts

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index cb3b991..08bb173 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -21,6 +21,12 @@ export default {
         content: 'width=device-width,initial-scale=1,user-scalable=no',
       },
     ],
+    [
+      'script',
+      {
+        src: '/check-dark-mode-v2.js',
+      },
+    ],
   ],
   appearance: false, // enable dynamic scripts for dark mode
   titleTemplate: true,
diff --git a/docs/.vitepress/public/check-dark-mode-v2.js b/docs/.vitepress/public/check-dark-mode-v2.js
new file mode 100644
index 0000000..81dad74
--- /dev/null
+++ b/docs/.vitepress/public/check-dark-mode-v2.js
@@ -0,0 +1,19 @@
+function getCookie(key) {
+  const name = `${encodeURIComponent(key)}=`;
+  const decodedCookies = decodeURIComponent(document.cookie);
+  const cookies = decodedCookies.split('; ');
+  for (let cookie of cookies) {
+    if (cookie.startsWith(name)) {
+      return cookie.substring(name.length);
+    }
+  }
+
+  return null;
+}
+
+const e = getCookie('openEuler-theme-appearance') || 'auto';
+const a = window.matchMedia('(prefers-color-scheme: dark)').matches;
+if (!e || e === 'auto' ? a : e === 'dark') {
+  document.documentElement.classList.add('dark');
+  document.documentElement.setAttribute('data-o-theme', 'dark');
+}
diff --git a/docs/.vitepress/src/NotFound.vue b/docs/.vitepress/src/NotFound.vue
index 8efce5f..353acfe 100644
--- a/docs/.vitepress/src/NotFound.vue
+++ b/docs/.vitepress/src/NotFound.vue
@@ -4,12 +4,12 @@ import { OResult, OButton } from '@opensig/opendesign';
 import ContentWrapper from '@/components/ContentWrapper.vue';
 
 import { useLocale } from '@/composables/useLocale';
-import { useTheme } from '@/composables/useTheme';
+import { useAppearance } from '@/stores/common';
 
 import notFoundImage from '@/assets/category/common/404.png';
 import notFoundImageDark from '@/assets/category/common/404-dark.png';
 
-const { isDark } = useTheme();
+const appearanceStore = useAppearance();
 const { t } = useLocale();
 </script>
 
@@ -18,7 +18,7 @@ const { t } = useLocale();
     <OResult>
       <template #image>
         <slot name="image">
-          <img class="not-found-image" alt="notFound" :src="isDark ? notFoundImageDark : notFoundImage" />
+          <img class="not-found-image" alt="notFound" :src="appearanceStore.theme === 'dark' ? notFoundImageDark : notFoundImage" />
         </slot>
       </template>
       <template #extra>
diff --git a/docs/.vitepress/src/assets/style/markdown.scss b/docs/.vitepress/src/assets/style/markdown.scss
index 9dfac97..89a0041 100644
--- a/docs/.vitepress/src/assets/style/markdown.scss
+++ b/docs/.vitepress/src/assets/style/markdown.scss
@@ -52,6 +52,7 @@
 }
 
 .markdown-body {
+  background: var(--o-color-fill2);
   color: var(--o-color-info2);
   font-family: inherit;
   min-height: auto;
@@ -168,7 +169,7 @@
   blockquote {
     color: var(--o-color-info2);
     padding: 12px 16px;
-    margin: var(--o-gap-3) 0 0;
+    margin: var(--o-gap-3) 0;
     border-left: 0;
     background-color: var(--o-color-control2-light);
     border-radius: var(--layout-pkg-radius);
diff --git a/docs/.vitepress/src/components/FloatingButton.vue b/docs/.vitepress/src/components/FloatingButton.vue
index 4e2ebe1..b63a5c4 100644
--- a/docs/.vitepress/src/components/FloatingButton.vue
+++ b/docs/.vitepress/src/components/FloatingButton.vue
@@ -358,7 +358,7 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .feedback {
   position: fixed;
-  bottom: 200px;
+  bottom: 257px;
   right: 80px;
   z-index: 10;
   height: 200px;
@@ -394,6 +394,10 @@ onUnmounted(() => {
   .text-name {
     @include tip2;
   }
+
+  @include hover {
+    color: var(--o-color-primary1);
+  }
 }
 :deep(.o-link-label) {
   display: flex;
diff --git a/docs/.vitepress/src/components/ResultEmpty.vue b/docs/.vitepress/src/components/ResultEmpty.vue
index 53473ca..64619c7 100644
--- a/docs/.vitepress/src/components/ResultEmpty.vue
+++ b/docs/.vitepress/src/components/ResultEmpty.vue
@@ -2,12 +2,12 @@
 import { OResult } from '@opensig/opendesign';
 
 import { useLocale } from '@/composables/useLocale';
-import { useTheme } from '@/composables/useTheme';
+import { useAppearance } from '@/stores/common';
 
 import notFoundImage from '@/assets/category/common/404.png';
 import notFoundImageDark from '@/assets/category/common/404-dark.png';
 
-const { isDark } = useTheme();
+const appearanceStore = useAppearance();
 const { t } = useLocale();
 
 defineProps({
@@ -22,7 +22,7 @@ defineProps({
   <OResult class="result-empty" :description="description || t('common.empty')">
     <template #image>
       <slot name="image">
-        <img class="empty-image" alt="empty" :src="isDark ? notFoundImageDark : notFoundImage" />
+        <img class="empty-image" alt="empty" :src="appearanceStore.theme === 'dark' ? notFoundImageDark : notFoundImage" />
       </slot>
     </template>
   </OResult>
diff --git a/docs/.vitepress/src/components/header/HeaderTheme.vue b/docs/.vitepress/src/components/header/HeaderTheme.vue
index b3cb3f6..6b6a2a4 100644
--- a/docs/.vitepress/src/components/header/HeaderTheme.vue
+++ b/docs/.vitepress/src/components/header/HeaderTheme.vue
@@ -29,7 +29,6 @@ const changeThemeMobile = () => {
 };
 
 onMounted(() => {
-  window.localStorage.removeItem('vitepress-theme-appearance');
   let theme;
   if (!getCustomCookie(APPEARANCE_KEY)) {
     const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
diff --git a/docs/.vitepress/src/composables/useTheme.ts b/docs/.vitepress/src/composables/useTheme.ts
deleted file mode 100644
index 722a325..0000000
--- a/docs/.vitepress/src/composables/useTheme.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { watch, computed, onMounted } from 'vue';
-import { useAppearance } from '@/stores/common';
-import { getCustomCookie, setCustomCookie } from '@/utils/cookie';
-import { isClient } from '@opensig/opendesign';
-
-const APPEARANCE_KEY = 'openEuler-theme-appearance';
-
-export const useTheme = () => {
-  const appearanceStore = useAppearance();
-
-  const isLight = computed(() => appearanceStore.theme === 'light');
-  const isDark = computed(() => appearanceStore.theme === 'dark');
-
-  const changeTheme = () => {
-    if (isClient) {
-      const theme = appearanceStore.theme === 'dark' ? 'light' : 'dark';
-      appearanceStore.theme = theme;
-
-      setCustomCookie(APPEARANCE_KEY, theme, 180, import.meta.env.VITE_COOKIE_DOMAIN);
-    }
-  };
-
-  watch(
-    () => {
-      return appearanceStore.theme;
-    },
-    (val) => {
-      if (isClient) {
-        const documentElement = document.documentElement;
-        val === 'light' && documentElement.removeAttribute('data-o-theme');
-        val === 'dark' && documentElement.setAttribute('data-o-theme', 'dark');
-      }
-    },
-    {
-      immediate: true,
-    }
-  );
-
-  onMounted(() => {
-    let theme;
-    if (!getCustomCookie(APPEARANCE_KEY)) {
-      const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      theme = prefereDark ? 'dark' : 'light';
-    } else {
-      theme = getCustomCookie(APPEARANCE_KEY);
-    }
-
-    appearanceStore.theme = theme === 'dark' ? 'dark' : 'light';
-  });
-
-  return {
-    isLight,
-    isDark,
-    theme: appearanceStore.theme,
-    changeTheme,
-  };
-};
diff --git a/docs/.vitepress/src/views/search/TheSearchResult.vue b/docs/.vitepress/src/views/search/TheSearchResult.vue
index 3a88424..60046ab 100644
--- a/docs/.vitepress/src/views/search/TheSearchResult.vue
+++ b/docs/.vitepress/src/views/search/TheSearchResult.vue
@@ -234,6 +234,7 @@ const goToPage = (href: string) => {
 }
 .search-tip {
   @include h1;
+  color: var(--o-color-info1);
   font-weight: 500;
 }
 .search-header {
-- 
Gitee