From bb5542503277e91d54bce550754328ba2f9d4933 Mon Sep 17 00:00:00 2001
From: redhoodsu <redhoodsu@tencent.com>
Date: Sat, 8 Feb 2020 18:21:45 +0800
Subject: [PATCH] feat: use dark theme for dark mode

---
 doc/UTIL_API.md          | 34 ++++++++++++++++++++
 src/DevTools/DevTools.js | 10 ++++--
 src/lib/util.js          | 67 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 2 deletions(-)

diff --git a/doc/UTIL_API.md b/doc/UTIL_API.md
index a1046e8..9945608 100644
--- a/doc/UTIL_API.md
+++ b/doc/UTIL_API.md
@@ -461,6 +461,40 @@ logger.on('debug', function (argList) {
 });
 ```
 
+## MediaQuery 
+
+CSS media query listener.
+
+Extend from Emitter.
+
+### constructor
+
+|Name |Type  |Desc       |
+|-----|------|-----------|
+|query|string|Media query|
+
+### isMatch
+
+Return true if given media query matches.
+
+### Events
+
+#### match
+
+Triggered when a media query matches.
+
+#### unmatch
+
+Opposite of match.
+
+```javascript
+const mediaQuery = new MediaQuery('screen and (max-width:1000px)');
+mediaQuery.isMatch(); // -> false
+mediaQuery.on('match', () => {
+    // Do something...
+});
+```
+
 ## MutationObserver 
 
 Safe MutationObserver, does nothing if MutationObserver is not supported.
diff --git a/src/DevTools/DevTools.js b/src/DevTools/DevTools.js
index a00e35e..cb6df41 100644
--- a/src/DevTools/DevTools.js
+++ b/src/DevTools/DevTools.js
@@ -11,7 +11,8 @@ import {
   each,
   isNum,
   $,
-  throttle
+  throttle,
+  MediaQuery
 } from '../lib/util'
 import evalCss from '../lib/evalCss'
 
@@ -142,7 +143,7 @@ export default class DevTools extends Emitter {
     const cfg = (this.config = Settings.createCfg('dev-tools', {
       transparency: 1,
       displaySize: 80,
-      theme: 'Light'
+      theme: isDarkMode() ? 'Dark' : 'Light'
     }))
 
     this._setTransparency(cfg.get('transparency'))
@@ -265,3 +266,8 @@ export default class DevTools extends Emitter {
     }
   }
 }
+
+function isDarkMode() {
+  const m = new MediaQuery('(prefers-color-scheme: dark)')
+  return m.isMatch()
+}
diff --git a/src/lib/util.js b/src/lib/util.js
index 6bcfc97..a497156 100644
--- a/src/lib/util.js
+++ b/src/lib/util.js
@@ -6909,6 +6909,73 @@ export var Logger = _.Logger = (function (exports) {
     return exports;
 })({});
 
+/* ------------------------------ MediaQuery ------------------------------ */
+
+export var MediaQuery = _.MediaQuery = (function (exports) {
+    /* CSS media query listener.
+     *
+     * Extend from Emitter.
+     *
+     * ### constructor
+     *
+     * |Name |Type  |Desc       |
+     * |-----|------|-----------|
+     * |query|string|Media query|
+     *
+     * ### isMatch
+     *
+     * Return true if given media query matches.
+     *
+     * ### Events
+     *
+     * #### match
+     *
+     * Triggered when a media query matches.
+     *
+     * #### unmatch
+     *
+     * Opposite of match.
+     */
+
+    /* example
+     * const mediaQuery = new MediaQuery('screen and (max-width:1000px)');
+     * mediaQuery.isMatch(); // -> false
+     * mediaQuery.on('match', () => {
+     *     // Do something...
+     * });
+     */
+
+    /* typescript
+     * export declare class MediaQuery extends Emitter {
+     *     constructor(query: string);
+     *     isMatch(): boolean;
+     * }
+     */
+
+    /* dependencies
+     * Emitter 
+     */
+
+    exports = Emitter.extend({
+        className: 'MediaQuery',
+        initialize: function(query) {
+            var _this = this;
+
+            this.callSuper(Emitter, 'initialize');
+            this._mql = window.matchMedia(query);
+
+            this._mql.addListener(function() {
+                _this.emit(_this.isMatch() ? 'match' : 'unmatch');
+            });
+        },
+        isMatch: function() {
+            return this._mql.matches;
+        }
+    });
+
+    return exports;
+})({});
+
 /* ------------------------------ Store ------------------------------ */
 
 export var Store = _.Store = (function (exports) {