From bb2cf0bfe9e0dd286ff98c8712a96fa1d1cad655 Mon Sep 17 00:00:00 2001
From: zepeng <75007029+yj-liuzepeng@users.noreply.github.com>
Date: Tue, 22 Aug 2023 16:40:26 +0800
Subject: [PATCH] chore(docs): updating the implementation of the theme switch
 button (#14014)

* chore(docs): updating the implementation of the theme switch button

* chore(docs): updating the implementation of the theme switch button

* chore(docs): updating the implementation of the theme switch button
---
 .../vitepress/components/common/vp-switch.vue | 15 ----
 .../components/common/vp-theme-toggler.vue    | 73 +++++++++----------
 .../vitepress/components/icons/dark.vue       |  2 +-
 .../vitepress/components/icons/light.vue      |  2 +-
 docs/components.d.ts                          |  1 -
 5 files changed, 37 insertions(+), 56 deletions(-)
 delete mode 100644 docs/.vitepress/vitepress/components/common/vp-switch.vue

diff --git a/docs/.vitepress/vitepress/components/common/vp-switch.vue b/docs/.vitepress/vitepress/components/common/vp-switch.vue
deleted file mode 100644
index 06f5f5712c..0000000000
--- a/docs/.vitepress/vitepress/components/common/vp-switch.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-// for now el-switch does not support customized icon in the dot
-// we will implement a simple version of el-switch then update the switch
-// component for this feature
-</script>
-
-<template>
-  <button class="switch" role="switch">
-    <div class="switch__action">
-      <div class="switch__icon">
-        <slot />
-      </div>
-    </div>
-  </button>
-</template>
diff --git a/docs/.vitepress/vitepress/components/common/vp-theme-toggler.vue b/docs/.vitepress/vitepress/components/common/vp-theme-toggler.vue
index f496ea9e63..2278b38b6d 100644
--- a/docs/.vitepress/vitepress/components/common/vp-theme-toggler.vue
+++ b/docs/.vitepress/vitepress/components/common/vp-theme-toggler.vue
@@ -1,50 +1,47 @@
 <script setup lang="ts">
+import { ref, watch } from 'vue'
+import { isDark } from '../../composables/dark'
 import DarkIcon from '../icons/dark.vue'
 import LightIcon from '../icons/light.vue'
-import VPSwitch from './vp-switch.vue'
+
+const darkMode = ref(isDark.value)
+
+watch(
+  () => isDark.value,
+  (val) => {
+    darkMode.value = val
+  }
+)
 </script>
 
 <template>
-  <VPSwitch>
-    <ElIcon :size="13">
-      <DarkIcon class="dark-icon" />
-      <LightIcon class="light-icon" />
-    </ElIcon>
-  </VPSwitch>
+  <div>
+    <ClientOnly>
+      <el-switch
+        v-model="darkMode"
+        :active-action-icon="DarkIcon"
+        :inactive-action-icon="LightIcon"
+      />
+    </ClientOnly>
+  </div>
 </template>
 
 <style lang="scss" scoped>
-.el-icon {
-  cursor: pointer;
-}
-
-.dark-icon,
-.light-icon {
-  transition: color var(--el-transition-duration),
-    opacity var(--el-transition-duration);
-}
-
-.light-icon {
-  opacity: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-.dark-icon {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-@at-root .dark {
-  .dark-icon {
-    opacity: 1;
-  }
-
-  .light-icon {
-    opacity: 0;
+:deep(.el-switch__core) {
+  --el-switch-on-color: var(--bg-color-mute);
+  --el-switch-off-color: var(--bg-color-mute);
+  --el-switch-border-color: var(--border-color);
+  .el-switch__action {
+    width: 14px;
+    height: 14px;
   }
 }
+:deep(.dark-icon) {
+  border-radius: 50%;
+  color: #cfd3dc;
+  background-color: #141414;
+}
+:deep(.light-icon) {
+  color: #606266;
+}
 </style>
diff --git a/docs/.vitepress/vitepress/components/icons/dark.vue b/docs/.vitepress/vitepress/components/icons/dark.vue
index a79b0239d1..e091553b75 100644
--- a/docs/.vitepress/vitepress/components/icons/dark.vue
+++ b/docs/.vitepress/vitepress/components/icons/dark.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg viewBox="0 0 24 24">
+  <svg viewBox="0 0 24 24" class="dark-icon">
     <path
       d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
       fill="currentColor"
diff --git a/docs/.vitepress/vitepress/components/icons/light.vue b/docs/.vitepress/vitepress/components/icons/light.vue
index 8f3a7c1a4f..8cf6b9d35b 100644
--- a/docs/.vitepress/vitepress/components/icons/light.vue
+++ b/docs/.vitepress/vitepress/components/icons/light.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg viewBox="0 0 24 24">
+  <svg viewBox="0 0 24 24" class="light-icon">
     <path
       d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
       fill="currentColor"
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 5b5bfe916f..d10a3342be 100644
--- a/docs/components.d.ts
+++ b/docs/components.d.ts
@@ -103,7 +103,6 @@ declare module '@vue/runtime-core' {
     VpSponsors: typeof import('./.vitepress/vitepress/components/vp-sponsors.vue')['default']
     VpSponsorSmall: typeof import('./.vitepress/vitepress/components/vp-sponsor-small.vue')['default']
     VpSubnav: typeof import('./.vitepress/vitepress/components/vp-subnav.vue')['default']
-    VpSwitch: typeof import('./.vitepress/vitepress/components/common/vp-switch.vue')['default']
     VpTableOfContent: typeof import('./.vitepress/vitepress/components/doc-content/vp-table-of-content.vue')['default']
     VpThemeToggler: typeof import('./.vitepress/vitepress/components/navbar/vp-theme-toggler.vue')['default']
     VpTranslation: typeof import('./.vitepress/vitepress/components/navbar/vp-translation.vue')['default']