release: v2.1.4

Author: dongwei1125

CHANGELOG.md

@@ -1,5 +1,13 @@
 ## 更新日志
 
+### 2.1.4
+
+*2024-09-10*
+
+#### Feat ✨
+
+- 支持自定义浏览器缓存字的键名
+
 ### 2.1.3
 
 *2024-07-15*

README.en.md

@@ -143,3 +143,9 @@ The solution is very simple. Add a script to the `head` in the `html`, which rea
 ```html
 <script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js"></script>
 ```
+
+Support custom browser cache word key name.
+
+```html
+<script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js" storage-key="custom-theme-appearance"></script>
+```

README.md

@@ -143,3 +143,9 @@ Vue.component(Rate.name, Darken(Rate))
 ```html
 <script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js"></script>
 ```
+
+支持自定义浏览器缓存字的键名。
+
+```html
+<script src="https://unpkg.com/element-theme-darkplus/utils/dark-mode.js" storage-key="custom-theme-appearance"></script>
+```

docs/components/ThemeToggle/index.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="theme-toggle" @click.stop="switchTheme" @keydown.enter.stop="resolve(true)">
-    <theme-switch v-model="isDark" :before-change="beforeChange" />
-  </div>
+  <theme-switch ref="switch" v-model="isDark" class="theme-toggle" :before-change="beforeChange" />
 </template>
 
 <script>
@@ -13,55 +11,44 @@ export default {
   name: 'ThemeToggle',
   components: { ThemeSwitch },
   mixins: [dark],
-  data() {
-    return {
-      resolve: null,
-      beforeChange: () =>
-        new Promise(resolve => {
-          this.resolve = resolve
-        }),
-    }
-  },
   methods: {
-    switchTheme(event) {
-      if (!document.startViewTransition) {
-        return this.resolve(true)
-      }
-
-      const x = event.clientX
-      const y = event.clientY
-      const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
-
-      const transition = document.startViewTransition(async () => {
-        this.resolve(true)
-        await this.$nextTick()
-      })
-
-      transition.ready.then(() => {
-        const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
-
-        document.documentElement.animate(
-          {
-            clipPath: this.isDark ? [...clipPath].reverse() : clipPath,
-          },
-          {
-            duration: 400,
-            easing: 'ease-in',
-            pseudoElement: this.isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
-          }
-        )
+    beforeChange() {
+      return new Promise(resolve => {
+        if (!document.startViewTransition) {
+          return resolve(true)
+        }
+
+        const switchElement = this.$refs.switch?.$el
+        const rect = switchElement.getBoundingClientRect()
+        const x = rect.left + rect.width / 2
+        const y = rect.top + rect.height / 2
+        const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
+
+        const transition = document.startViewTransition(async () => {
+          resolve(true)
+          await this.$nextTick()
+        })
+
+        transition.ready.then(() => {
+          const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
+
+          document.documentElement.animate(
+            {
+              clipPath: this.isDark ? [...clipPath].reverse() : clipPath,
+            },
+            {
+              duration: 400,
+              easing: 'ease-in',
+              pseudoElement: this.isDark ? '::view-transition-old(root)' : '::view-transition-new(root)',
+            }
+          )
+        })
       })
     },
   },
 }
 </script>
 
-<style scoped>
-.theme-toggle {
-  display: inline-block;
-}
-</style>
-
 <style>
 ::view-transition-new(root),
 ::view-transition-old(root) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "element-theme-darkplus",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Element component dark theme base on the latest version 2.15.14.",
   "main": "lib/index.css",
   "style": "lib/index.css",
@@ -10,6 +10,7 @@
     "EXAMPLE.md"
   ],
   "scripts": {
+    "dev": "live-server docs",
     "build:css": "gulp build",
     "build:scripts": "rollup -c scripts/rollup.config.js"
   },
@@ -45,6 +46,7 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-util": "^3.0.8",
+    "live-server": "^1.2.2",
     "prettier": "^2.8.8",
     "rollup": "^4.18.0",
     "sass": "1.32.13",

scripts/dark-mode.js

@@ -1,6 +1,6 @@
 import { scripts } from '../theme.config'
 
-const { storageKey } = scripts
+const storageKey = document.currentScript?.getAttribute('storage-key') || scripts.storageKey
 const store = localStorage.getItem(`${storageKey}`)
 const mediaQuery = window.matchMedia?.('(prefers-color-scheme: dark)')
 const preferredDark = mediaQuery?.matches || false