add dark mode config

src/App.js

@@ -21,7 +21,7 @@ class App extends Component {
             search_text: null,
             flow_render_key: +new Date(),
             token: localStorage['TOKEN']||null,
-            darkmode: window.matchMedia('(prefers-color-scheme: dark)').matches,
+            darkmode: App.is_darkmode(),
         };
         this.show_sidebar_bound=this.show_sidebar.bind(this);
         this.set_mode_bound=this.set_mode.bind(this);
@@ -33,9 +33,9 @@ class App extends Component {
 
     componentDidMount() {
         this.update_color_scheme();
-        window.matchMedia('(prefers-color-scheme: dark)').addListener((e)=>{
+        window.matchMedia('(prefers-color-scheme: dark)').addListener(()=>{
             this.setState({
-                darkmode: e.matches,
+                darkmode: App.is_darkmode(),
             });
         });
     }
@@ -45,6 +45,14 @@ class App extends Component {
             this.update_color_scheme();
     }
 
+    static is_darkmode() {
+        if(window.config.color_scheme==='dark') return true;
+        if(window.config.color_scheme==='light') return false;
+        else { // 'default'
+            return window.matchMedia('(prefers-color-scheme: dark)').matches;
+        }
+    }
+
     update_color_scheme() {
         if(this.state.darkmode)
             document.body.classList.add('root-dark-mode');

src/Config.js

@@ -19,6 +19,7 @@ const DEFAULT_CONFIG={
     color_picker: true,
     easter_egg: true,
     comment_cache: false,
+    color_scheme: 'default',
 };
 
 export function load_config() {
@@ -119,6 +120,47 @@ class ConfigBackground extends PureComponent {
     }
 }
 
+class ConfigColorScheme extends PureComponent {
+    constructor(props) {
+        super(props);
+        this.state={
+            color_scheme: window.config.color_scheme,
+        };
+    }
+
+    save_changes() {
+        this.props.callback({
+            color_scheme: this.state.color_scheme,
+        });
+    }
+
+    on_select(e) {
+        let value=e.target.value;
+        this.setState({
+            color_scheme: value,
+        },this.save_changes.bind(this));
+    }
+
+    render() {
+        return (
+            <div>
+                <p>
+                    <b>夜间模式：</b>
+                    <select value={this.state.color_scheme} onChange={this.on_select.bind(this)}>
+                        <option value="default">跟随系统</option>
+                        <option value="light">始终浅色模式</option>
+                        <option value="dark">始终深色模式</option>
+                    </select>
+                    &nbsp; <small>#color_scheme</small>
+                </p>
+                <p>
+                    选择浅色或深色模式，或者与系统颜色模式一致
+                </p>
+            </div>
+        )
+    }
+}
+
 class ConfigSwitch extends PureComponent {
     constructor(props) {
         super(props);
@@ -189,6 +231,8 @@ export class ConfigUI extends PureComponent {
                 <div className="box">
                     <ConfigBackground callback={this.save_changes_bound} />
                     <hr />
+                    <ConfigColorScheme callback={this.save_changes_bound} />
+                    <hr />
                     <ConfigSwitch callback={this.save_changes_bound} id="pressure" name="快速返回"
                                   description="短暂按住 Esc 键或重压屏幕（3D Touch）可以快速返回或者刷新树洞"
                     />