add: 支持自定义浏览器缓存字的键名

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>
+```

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