add dark mode

src/Flows.css

@@ -1,11 +1,27 @@
+:root {
+    --box-bgcolor-light: hsl(0,0%,97%);
+    --box-bgcolor-dark: hsl(0,0%,20%);
+    --foreground-dark: hsl(0,0%,93%)
+}
+
 .box {
-    background-color: hsl(0,0%,97%);
+    background-color: var(--box-bgcolor-light);
+    color: black;
     border-radius: 5px;
     margin: 1em 0;
     padding: .5em;
     box-shadow: 0 2px 5px rgba(0,0,0,.4);
 }
 
+.root-dark-mode .box {
+    background-color: var(--box-bgcolor-dark);
+    color: var(--foreground-dark);
+}
+
+.root-dark-mode .sidebar .box {
+    --box-bgcolor-dark: hsl(0,0%,25%);
+}
+
 .box-tip {
     min-width: 100px;
     z-index: 1;
@@ -18,6 +34,11 @@
     text-shadow: 0 0 3px black;
 }
 
+.root-dark-mode .box-danger {
+    background-color: #d44;
+    color: var(--foreground-dark);
+}
+
 .left-container .flow-item {
     display: inline-block;
     width: 600px;
@@ -139,6 +160,10 @@
     max-height: 80vh;
 }
 
+.root-dark-mode .flow-item-row p.img img {
+    filter: brightness(.8);
+}
+
 .box-header-badge {
     float: right;
     margin: 0 .5em;
@@ -157,6 +182,10 @@
     display: none;
 }
 
+.root-dark-mode .flow-item-dot {
+    background-color: #eebb66;
+}
+
 .left-container .flow-item-dot {
     display: block;
 }
@@ -174,6 +203,10 @@
     color: #666666;
 }
 
+.root-dark-mode .box-id {
+    color: #bbbbbb;
+}
+
 .box-id a:hover::before {
     content: "复制全文";
     position: relative;
@@ -224,4 +257,8 @@
     border-radius: 3px;
     margin-right: .25em;
     padding: 0 .25em;
+}
+
+.root-dark-mode .box-header-tag {
+    background-color: #00a;
 }