Add dark mode support for the AST tree.

src/OrgAst.module.css

@@ -1,16 +1,57 @@
 .OrgAst {
-  background: #eeeeee;
+  --ast-background-color: #111111;
+  --ast-font-color: #ffffff;
+
+  --ast-node-border-color: #bbbbbb;
+  --ast-node-shadow-color: #bbbbbb;
+
+  --ast-node-type-background-color: #933009;
+  --ast-node-type-hover-background-color: #8f0745;
+  --ast-node-type-selected-background-color: #630368;
+
+  --ast-node-subsection-border-color: #ffffff;
+
+  --ast-node-children-background-color: #111111;
+
+  --ast-node-table-row-odd-background-color: #111111;
+  --ast-node-table-row-even-background-color: #000000;
+}
+@media (prefers-color-scheme: light) {
+  .OrgAst {
+    --ast-background-color: #eeeeee;
+    --ast-font-color: #000000;
+
+    --ast-node-background-color: #ffffff;
+    --ast-node-border-color: #000000;
+    --ast-node-shadow-color: #000000;
+
+    --ast-node-type-background-color: #6ccff6;
+    --ast-node-type-hover-background-color: #70f8ba;
+    --ast-node-type-selected-background-color: #9cfc97;
+
+    --ast-node-subsection-border-color: #000000;
+
+    --ast-node-children-background-color: #eeeeee;
+
+    --ast-node-table-row-odd-background-color: #eeeeee;
+    --ast-node-table-row-even-background-color: #ffffff;
+  }
+}
+
+.OrgAst {
+  background: var(--ast-background-color);
+  color: var(--ast-font-color);
   padding: 5px;
   overflow: auto;
 }
 
 .OrgAstNode {
-  border: 1px solid #000000;
+  border: 1px solid var(--ast-node-border-color);
-  background: #ffffff;
+  background: var(--ast-node-background-color);
-  box-shadow: -3px 3px 1px #000000;
+  box-shadow: -3px 3px 1px var(--ast-node-shadow-color);
 
   > details {
-    border: 1px solid #000000;
+    border: 1px solid var(--ast-node-subsection-border-color);
     margin: 5px 5px 5px 2px;
 
     > summary {
@@ -23,25 +64,25 @@
     > summary {
       border-width: 0 0 1px 0;
       border-style: dotted;
-      border-color: #000000;
+      border-color: var(--ast-node-subsection-border-color);
     }
   }
 }
 
 .OrgAstNode.selected {
   > .OrgAstNodeType {
-    background: #9cfc97;
+    background: var(--ast-node-type-selected-background-color);
   }
 }
 
 .OrgAstNode.hovered:not(.selected) {
   > .OrgAstNodeType {
-    background: #70f8ba;
+    background: var(--ast-node-type-hover-background-color);
   }
 }
 
 .OrgAstNodeType {
-  background: #6ccff6;
+  background: var(--ast-node-type-background-color);
   padding: 3px;
   overflow: hidden;
   cursor: pointer;
@@ -64,20 +105,20 @@
 
 .OrgAstChildren {
   padding: 5px 5px 5px 20px;
-  background: #eeeeee;
+  background: var(--ast-node-children-background-color);
 }
 
 .OrgAstProperties,
 .OrgAstObjectTree,
 .OrgAstOptionalPair {
-  border: 1px solid #000000;
+  border: 1px solid var(--ast-node-subsection-border-color);
   margin: 5px;
 
   > tbody {
     > tr {
       border-width: 1px 0;
       border-style: solid;
-      border-color: #000000;
+      border-color: var(--ast-node-subsection-border-color);
 
       > th,
       > td {
@@ -92,10 +133,10 @@
     }
 
     > tr:nth-child(odd) {
-      background-color: #eeeeee;
+      background-color: var(--ast-node-table-row-odd-background-color);
     }
     > tr:nth-child(even) {
-      background-color: #ffffff;
+      background-color: var(--ast-node-table-row-even-background-color);
     }
   }
 }
@@ -103,7 +144,7 @@
 .OrgAstObjectTree {
   > tbody {
     border-style: dashed;
-    border-color: #000000;
+    border-color: var(--ast-node-subsection-border-color);
   }
   > tbody:not(:first-child, :last-child) {
     border-width: 3px 0;