Merge branch 'dark_mode'

src/Editor.module.css

@@ -1,6 +1,19 @@
+.EditorTextWrapper {
+  --editor-background-color: #000000;
+  --editor-font-color: #ffffff;
+  --editor-highlight-color: #0000ff;
+}
+@media (prefers-color-scheme: light) {
+  .EditorTextWrapper {
+    --editor-background-color: #ffffff;
+    --editor-font-color: #000000;
+    --editor-highlight-color: #ffff00;
+  }
+}
+
 .EditorTextWrapper {
   position: relative;
-  background: white;
+  background: var(--editor-background-color);
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
     "DejaVu Sans Mono", monospace;
   font-weight: normal;
@@ -10,6 +23,7 @@
 
 .EditorTextArea,
 .EditorUnderlay {
+  color: var(--editor-font-color);
   font-family: inherit;
   font-weight: inherit;
   font-size: inherit;
@@ -44,6 +58,6 @@
   overflow-y: scroll;
 
   .EditorHighlighted {
-    background: #ffff00;
+    background: var(--editor-highlight-color);
   }
 }

src/Editor.tsx

@@ -42,6 +42,7 @@ function Editor({
         className={styles.EditorTextArea}
         value={value}
         onScroll={onTextAreaScroll}
+        spellCheck={false}
       />
       <div ref={shadowRef} className={styles.EditorUnderlay}>
         {buildShadow(highlights, value)}

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;
-  background: #ffffff;
-  box-shadow: -3px 3px 1px #000000;
+  border: 1px solid var(--ast-node-border-color);
+  background: var(--ast-node-background-color);
+  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;