src/Editor.module.css

@@ -1,19 +1,6 @@
-.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: var(--editor-background-color);
+  background: white;
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
     "DejaVu Sans Mono", monospace;
   font-weight: normal;
@@ -23,7 +10,6 @@
 
 .EditorTextArea,
 .EditorUnderlay {
-  color: var(--editor-font-color);
   font-family: inherit;
   font-weight: inherit;
   font-size: inherit;
@@ -58,6 +44,6 @@
   overflow-y: scroll;
 
   .EditorHighlighted {
-    background: var(--editor-highlight-color);
+    background: #ffff00;
   }
 }

src/Editor.tsx

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