From dce5ab5ef523cff4ac1b07489d66ee980d5544ab Mon Sep 17 00:00:00 2001
From: surunzi <surunzi@foxmail.com>
Date: Sat, 2 Nov 2024 20:57:10 +0800
Subject: [PATCH] feat: add theme

---
 DOC.md        | 37 +++++++++++++++++++++++++++++++++++++
 DOC_CN.md     | 37 +++++++++++++++++++++++++++++++++++++
 cspell.json   |  1 +
 i18n/theme.md | 15 +++++++++++++++
 index.json    | 13 +++++++++++++
 src/theme.js  | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 test/theme.js |  2 ++
 7 files changed, 154 insertions(+)
 create mode 100644 i18n/theme.md
 create mode 100644 src/theme.js
 create mode 100644 test/theme.js

diff --git a/DOC.md b/DOC.md
index 48b80a1f..98e9cf0e 100644
--- a/DOC.md
+++ b/DOC.md
@@ -13217,6 +13217,43 @@ template('<p><%= util["upperCase"](name) %></p>', {
 })({ name: 'licia' }); // -> '<p>LICIA</p>'
 ```
 
+## theme 
+
+Theme helper.
+
+<details>
+<summary>Type Definition</summary>
+
+```typescript
+namespace theme {
+    interface ITheme extends Emitter {
+        get(): string;
+    }
+}
+const theme: theme.ITheme;
+```
+
+</details>
+
+### on
+
+Bind change event.
+
+### off
+
+Unbind change event.
+
+### get
+
+Get current theme(light or dark).
+
+```javascript
+theme.on('change', function(theme) {
+    console.log(theme); // -> 'dark'
+});
+theme.get(); // -> 'light'
+```
+
 ## throttle 
 
 Return a new throttled version of the passed function.
diff --git a/DOC_CN.md b/DOC_CN.md
index 74480385..e753bbf8 100644
--- a/DOC_CN.md
+++ b/DOC_CN.md
@@ -13208,6 +13208,43 @@ template('<p><%= util["upperCase"](name) %></p>', {
 })({ name: 'licia' }); // -> '<p>LICIA</p>'
 ```
 
+## theme
+
+主题工具库。
+
+<details>
+<summary>类型定义</summary>
+
+```typescript
+namespace theme {
+    interface ITheme extends Emitter {
+        get(): string;
+    }
+}
+const theme: theme.ITheme;
+```
+
+</details>
+
+### on
+
+绑定 change 事件。
+
+### off
+
+解绑 change 事件。
+
+### get
+
+获取当前主题（light 或 dark）。
+
+```javascript
+theme.on('change', function(theme) {
+    console.log(theme); // -> 'dark'
+});
+theme.get(); // -> 'light'
+```
+
 ## throttle
 
 返回函数的节流阀版本。
diff --git a/cspell.json b/cspell.json
index 671300e1..ee26a999 100644
--- a/cspell.json
+++ b/cspell.json
@@ -416,6 +416,7 @@
     "swap",
     "table",
     "template",
+    "theme",
     "throttle",
     "through",
     "tildify",
diff --git a/i18n/theme.md b/i18n/theme.md
new file mode 100644
index 00000000..86030a94
--- /dev/null
+++ b/i18n/theme.md
@@ -0,0 +1,15 @@
+## CN
+
+主题工具库。
+
+### on
+
+绑定 change 事件。
+
+### off
+
+解绑 change 事件。
+
+### get
+
+获取当前主题（light 或 dark）。
diff --git a/index.json b/index.json
index 7798fa2a..b0fab5c8 100644
--- a/index.json
+++ b/index.json
@@ -6441,6 +6441,19 @@
             "browser"
         ]
     },
+    "theme": {
+        "dependencies": [
+            "Emitter",
+            "MediaQuery"
+        ],
+        "description": "Theme helper.",
+        "env": [
+            "browser"
+        ],
+        "test": [
+            "browser"
+        ]
+    },
     "throttle": {
         "dependencies": [
             "debounce"
diff --git a/src/theme.js b/src/theme.js
new file mode 100644
index 00000000..75ad3555
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,49 @@
+/* Theme helper.
+ *
+ * ### on
+ *
+ * Bind change event.
+ *
+ * ### off
+ *
+ * Unbind change event.
+ *
+ * ### get
+ *
+ * Get current theme(light or dark).
+ */
+
+/* example
+ * theme.on('change', function(theme) {
+ *     console.log(theme); // -> 'dark'
+ * });
+ * theme.get(); // -> 'light'
+ */
+
+/* module
+ * env: browser
+ */
+
+/* typescript
+ * export declare namespace theme {
+ *     interface ITheme extends Emitter {
+ *         get(): string;
+ *     }
+ * }
+ * export declare const theme: theme.ITheme;
+ */
+
+_('Emitter MediaQuery');
+
+const m = new MediaQuery('(prefers-color-scheme: dark)');
+
+exports = {
+    get() {
+        return m.isMatch() ? 'dark' : 'light';
+    }
+};
+
+Emitter.mixin(exports);
+
+m.on('match', () => exports.emit('change', 'dark'));
+m.on('unmatch', () => exports.emit('change', 'light'));
diff --git a/test/theme.js b/test/theme.js
new file mode 100644
index 00000000..6ae34a17
--- /dev/null
+++ b/test/theme.js
@@ -0,0 +1,2 @@
+const t = util.isDarkMode() ? 'dark' : 'light';
+expect(theme.get()).to.equal(t);