feat: make darkmode more readable (#396)

web/styles/theme.scss

@@ -129,6 +129,17 @@
     background-color: #d7e1f6 !important;
   }
 
+
+  .cm-panels-bottom {
+      background-color: #e1e1e1;
+      border-top: #cacaca 1px solid;
+      .cm-vim-panel {
+        padding: 0 20px;
+        max-width: var(--editor-width);
+        margin: auto;
+      }
+  }
+
   .cm-editor .cm-tooltip-autocomplete {
     .cm-completionDetail {
       font-style: normal;
@@ -410,6 +421,7 @@
   .cm-line.sb-directive-start,
   .cm-line.sb-directive-end {
     color: var(--directive-font-color);
+
     background-color: rgb(233, 233, 233, 50%);
     padding: 3px;
   }
@@ -540,16 +552,21 @@
 
 html[data-theme="dark"] {
   #sb-root {
-    background-color: #000;
+    background-color: #111;
+    --directive-font-color: #adadad;
     color: #fff;
   }
 
   #sb-top {
-    background-color: rgb(96, 96, 96);
+    background-color: rgb(38, 38, 38);
     border-bottom: rgb(62, 62, 62) 1px solid;
     color: #fff;
   }
 
+  .sb-directive-start {
+    background-color: rgb(38, 38, 38) !important;
+  }
+
   .sb-actions button {
     color: #adadad;
   }
@@ -571,7 +588,9 @@ html[data-theme="dark"] {
     color: #c7c7c7;
   }
 
+  .sb-meta {
 
+  }
 
   .sb-modal-box,
   /* duplicating the class name to increase specificity */
@@ -586,6 +605,20 @@ html[data-theme="dark"] {
 
   #sb-editor {
 
+    .cm-selectionBackground {
+      background-color: #d7e1f630 !important;
+    }
+
+    .cm-panels-bottom {
+      border-top: rgb(62, 62, 62) 1px solid;
+      background: rgb(38, 38, 38);
+      color: white !important;
+      .cm-vim-panel {
+        max-width: var(--editor-width);
+        margin: auto;
+      }
+    }
+
     .sb-line-h1,
     .sb-line-h2,
     .sb-line-h3,
@@ -597,7 +630,7 @@ html[data-theme="dark"] {
       background-color: rgb(41, 40, 35, 0.5);
 
       .sb-frontmatter-marker {
-        color: #000;
+        color: #fff;
       }
     }