update style in dark mode

src/Flows.css

@@ -1,6 +1,6 @@
 :root {
     --box-bgcolor-light: hsl(0,0%,97%);
-    --box-bgcolor-dark: hsl(0,0%,20%);
+    --box-bgcolor-dark: hsl(0,0%,16%);
 }
 
 .box {
@@ -15,11 +15,7 @@
 .root-dark-mode .box {
     background-color: var(--box-bgcolor-dark);
     color: var(--foreground-dark);
-    box-shadow: 0 0 3px rgba(255,255,255,.2);
-}
-
-.root-dark-mode .sidebar .box {
-    --box-bgcolor-dark: hsl(0,0%,25%);
+    box-shadow: 0 0 2px rgba(255,255,255,.25), 0 0 7px rgba(0,0,0,.15);
 }
 
 .box-tip {

src/Sidebar.css

@@ -21,10 +21,10 @@
 }
 
 .root-dark-mode .sidebar-on .sidebar-shadow {
-    opacity: .5;
+    opacity: .65;
 }
 .root-dark-mode .sidebar-on .sidebar-shadow:active {
-    opacity: .65;
+    opacity: .8;
 }
 
 .sidebar {
@@ -109,7 +109,7 @@
 }
 
 .root-dark-mode .sidebar-title {
-    background-color: hsla(0,0%,20%,.6);
+    background-color: hsla(0,0%,18%,.6);
     color: var(--foreground-dark);
     text-shadow: 0 0 3px black;
 }

src/Title.css

@@ -12,8 +12,8 @@
 }
 
 .root-dark-mode .title-bar {
-    background-color: hsla(0,0%,15%,.6);
-    box-shadow: 0 0 15px rgba(255,255,255,.2);
+    background-color: hsla(0,0%,12%,.8);
+    box-shadow: 0 0 5px rgba(255,255,255,.1);
 }
 
 .control-bar {
@@ -29,7 +29,7 @@
     border-radius: 5px;
 }
 .control-btn:hover {
-    background-color: #555555;
+    background-color: #666666;
     color: white;
 }
 .control-btn-label {
@@ -71,10 +71,12 @@
 }
 
 .root-dark-mode .control-search {
-    background-color: rgba(255,255,255,.7) !important;
+    background-color: hsla(0,0%,35%,.6) !important;
+    color: var(--foreground-dark);
 }
 .root-dark-mode .control-search:focus {
-    background-color: hsl(0,0%,90%) !important;
+    background-color: hsl(0,0%,80%) !important;
+    color: black !important;
 }
 
 .list-menu {

src/color_picker.js

@@ -11,14 +11,14 @@ export class ColorPicker {
     get(name) {
         name=name.toLowerCase();
         if(name==='洞主')
-            return ['hsl(0,0%,97%)','hsl(0,0%,25%)'];
+            return ['hsl(0,0%,97%)','hsl(0,0%,16%)'];
 
         if(!this.names[name]) {
             this.current_h+=golden_ratio_conjugate;
             this.current_h%=1;
             this.names[name]=[
                 `hsl(${this.current_h*360}, 50%, 90%)`,
-                `hsl(${this.current_h*360}, 60%, 25%)`,
+                `hsl(${this.current_h*360}, 60%, 20%)`,
             ];
         }
         return this.names[name];

src/index.css

@@ -57,17 +57,31 @@ button, .button {
 }
 
 .root-dark-mode button, .root-dark-mode .button {
-    background-color: rgba(255,255,255,.6);
+    background-color: hsl(0,0%,30%);
+    color: var(--foreground-dark);
 }
 
 button:hover, .button:hover {
     background-color: rgba(255,255,255,.7);
 }
 
+.root-dark-mode button:hover, .root-dark-mode .button:hover {
+    background-color: hsl(0,0%,40%);
+}
+
 button:disabled, .button:disabled {
     background-color: rgba(128,128,128,.5);
 }
 
-.root-dark-mode input:not([type=file]), .root-dark-mode textarea {
-    background-color: hsl(0,0%,80%);
+.root-dark-mode button:disabled, .root-dark-mode .button:disabled {
+    background-color: hsl(0,0%,20%);
+    color: hsl(0,0%,60%);
+}
+
+.root-dark-mode input:not([type=file]), .root-dark-mode textarea {
+    background-color: hsl(0,0%,30%);
+    color: var(--foreground-dark);
+}
+.root-dark-mode input:not([type=file])::placeholder {
+    color: var(--foreground-dark);
 }