feat: add theme

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.

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
 
 返回函数的节流阀版本。

cspell.json

@@ -416,6 +416,7 @@
     "swap",
     "table",
     "template",
+    "theme",
     "throttle",
     "through",
     "tildify",

i18n/theme.md

@@ -0,0 +1,15 @@
+## CN
+
+主题工具库。
+
+### on
+
+绑定 change 事件。
+
+### off
+
+解绑 change 事件。
+
+### get
+
+获取当前主题（light 或 dark）。

index.json

@@ -6441,6 +6441,19 @@
             "browser"
         ]
     },
+    "theme": {
+        "dependencies": [
+            "Emitter",
+            "MediaQuery"
+        ],
+        "description": "Theme helper.",
+        "env": [
+            "browser"
+        ],
+        "test": [
+            "browser"
+        ]
+    },
     "throttle": {
         "dependencies": [
             "debounce"

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'));

test/theme.js

@@ -0,0 +1,2 @@
+const t = util.isDarkMode() ? 'dark' : 'light';
+expect(theme.get()).to.equal(t);