Colors are slightly better in the editor

index.html

@@ -80,11 +80,11 @@
     }
 
     .doc_header {
-      @apply pl-2 pr-2 lg:text-xl text-sm py-1 my-1 rounded-lg text-white hover:text-blue hover:bg-red
+      @apply pl-2 pr-2 lg:text-xl text-sm py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
     }
 
     .doc_subheader {
-      @apply pl-2 pr-2 lg:text-xl text-sm ml-6 py-1 my-1 rounded-lg text-white hover:text-blue hover:bg-red
+      @apply pl-2 pr-2 lg:text-xl text-sm ml-6 py-1 my-1 rounded-lg text-white hover:text-brightwhite hover:bg-brightblack
     }
 
 

src/EditorSetup.ts

@@ -110,11 +110,11 @@ export const getCodeMirrorTheme = (theme: {[key: string]: string}): Extension =>
       ".cm-gutters": {
         //backgroundColor: base00,
         backgroundColor: "transparent",
-        color: selection_background,
+        color: foreground,
       },
       ".cm-activeLineGutter": {
-        backgroundColor: foreground,
-        color: white,
+        backgroundColor: selection_background,
+        color: selection_foreground,
       },
 
       ".cm-foldPlaceholder": {

src/InterfaceLogic.ts

@@ -326,10 +326,11 @@ export const installInterfaceLogic = (app: Editor) => {
 
     // @ts-ignore
     let selected_theme = colors[app.settings.theme as string];
-    let theme_preview = "";
+    let theme_preview = "<div class='pl-4'>";
     for (const [key, _] of Object.entries(selected_theme)) {
-      theme_preview += `<p class="inline text-${key} bg-${key}">█</div>`;
+      theme_preview += `<p class="inline text-${key} bg-${key}">█</p>`;
     }
+    theme_preview += "</div>";
     app.interface.theme_previewer.innerHTML = theme_preview;
     // Populate the font family selector
     const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement;