improve title-bar dark mode

src/App.js

@@ -5,6 +5,7 @@ import {Sidebar} from './Sidebar';
 import {PressureHelper} from './PressureHelper';
 import {TokenCtx} from './UserAction';
 import {load_config,bgimg_style} from './Config';
+import {listen_darkmode} from './infrastructure/functions';
 
 function DeprecatedAlert(props) {
     return null;
@@ -14,6 +15,7 @@ class App extends Component {
     constructor(props) {
         super(props);
         load_config();
+        listen_darkmode({default: undefined, light: false, dark: true}[window.config.color_scheme]);
         this.state={
             sidebar_title: null,
             sidebar_content: null, // determine status of sidebar
@@ -21,7 +23,6 @@ class App extends Component {
             search_text: null,
             flow_render_key: +new Date(),
             token: localStorage['TOKEN']||null,
-            darkmode: App.is_darkmode(),
         };
         this.show_sidebar_bound=this.show_sidebar.bind(this);
         this.set_mode_bound=this.set_mode.bind(this);
@@ -31,20 +32,6 @@ class App extends Component {
         this.inpku_flag=window[atob('ZG9jdW1lbnQ')][atob('Y29va2ll')].indexOf(atob('cGt1X2lwX2ZsYWc9eWVz'))!==-1;
     }
 
-    componentDidMount() {
-        this.update_color_scheme();
-        window.matchMedia('(prefers-color-scheme: dark)').addListener(()=>{
-            this.setState({
-                darkmode: App.is_darkmode(),
-            });
-        });
-    }
-
-    componentDidUpdate(prevProps,prevState) {
-        if(this.state.darkmode!==prevState.darkmode)
-            this.update_color_scheme();
-    }
-
     static is_darkmode() {
         if(window.config.color_scheme==='dark') return true;
         if(window.config.color_scheme==='light') return false;
@@ -53,14 +40,6 @@ class App extends Component {
         }
     }
 
-    update_color_scheme() {
-        if(this.state.darkmode)
-            document.body.classList.add('root-dark-mode');
-        else
-            document.body.classList.remove('root-dark-mode');
-    }
-
-
     on_pressure() {
         if(this.state.sidebar_title!==null)
             this.setState((prevState)=>({

src/Flows.css

@@ -1,7 +1,6 @@
 :root {
     --box-bgcolor-light: hsl(0,0%,97%);
     --box-bgcolor-dark: hsl(0,0%,20%);
-    --foreground-dark: hsl(0,0%,93%)
 }
 
 .box {
@@ -16,6 +15,7 @@
 .root-dark-mode .box {
     background-color: var(--box-bgcolor-dark);
     color: var(--foreground-dark);
+    box-shadow: 0 0 10px rgba(255,255,255,.1);
 }
 
 .root-dark-mode .sidebar .box {
@@ -228,6 +228,11 @@
     filter: brightness(95%);
 }
 
+.root-dark-mode .flow-item-row-quote {
+    opacity: .7;
+    filter: unset;
+}
+
 .flow-item-quote>.box {
     margin-left: 2.5em;
     max-height: 15em;

src/Sidebar.css

@@ -40,7 +40,7 @@
 }
 
 .root-dark-mode .sidebar {
-    background-color: hsla(0,0%,5%,.7);
+    background-color: hsla(0,0%,5%,.5);
 }
 
 .sidebar, .sidebar-title {

src/Title.css

@@ -1,11 +1,3 @@
-/* overriding infrastructure/widget.css */
-.root-dark-mode .title-line {
-    color: var(--foreground-dark);
-}
-.root-dark-mode .title-line::before, .root-dark-mode .title-line::after {
-    background-color: var(--foreground-dark);
-}
-
 .title-bar {
     z-index: 10;
     position: sticky;
@@ -20,7 +12,8 @@
 }
 
 .root-dark-mode .title-bar {
-    background-color: hsla(0,0%,80%,.7);
+    background-color: hsla(0,0%,15%,.6);
+    box-shadow: 0 0 15px rgba(255,255,255,.2);
 }
 
 .control-bar {
@@ -40,6 +33,15 @@
     color: white;
 }
 
+.root-dark-mode .control-btn {
+    color: var(--foreground-dark);
+    opacity: .9;
+}
+.root-dark-mode .control-btn:hover {
+    color: var(--foreground-dark);
+    opacity: 1;
+}
+
 .control-btn .icon:before {
     margin: .5em;
     display: inline-block;
@@ -57,6 +59,9 @@
     background-color: white !important;
 }
 
+.root-dark-mode .control-search {
+    background-color: rgba(255,255,255,.7) !important;
+}
 .root-dark-mode .control-search:focus {
     background-color: hsl(0,0%,90%) !important;
 }