slow and tedious progress

src/EditorSetup.ts

@@ -268,6 +268,7 @@ export const editorSetup: Extension = (() => [
 export const installEditor = (app: Editor) => {
   app.vimModeCompartment = new Compartment();
   app.hoveringCompartment = new Compartment();
+  app.themeCompartment = new Compartment();
   app.completionsCompartment = new Compartment();
   app.withLineNumbers = new Compartment();
   app.chosenLanguage = new Compartment();
@@ -297,7 +298,9 @@ export const installEditor = (app: Editor) => {
       app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
     ),
     editorSetup,
-    getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
+    app.themeCompartment.of(
+      getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
+    ),
     app.chosenLanguage.of(javascript()),
   ];
   app.dynamicPlugins = new Compartment();

src/main.ts

@@ -34,6 +34,7 @@ import { makeNumberExtensions } from "./extensions/NumberExtensions";
 // @ts-ignore
 import { registerSW } from "virtual:pwa-register";
 import colors from "./colors.json";
+import { code } from "./documentation/basics/code";
 
 if ("serviceWorker" in navigator) {
   registerSW();
@@ -53,6 +54,7 @@ export class Editor {
   hidden_interface: boolean = false;
   fontSize!: Compartment;
   withLineNumbers!: Compartment;
+  themeCompartment!: Compartment;
   vimModeCompartment!: Compartment;
   hoveringCompartment!: Compartment;
   completionsCompartment!: Compartment;
@@ -207,6 +209,9 @@ export class Editor {
 
     // Loading universe from URL (if needed)
     loadUniverserFromUrl(this);
+
+    // Set the color scheme for the application
+    this.readTheme("Floraverse");
   }
 
   private getBuffer(type: string): any {
@@ -294,9 +299,9 @@ export class Editor {
      */
     const tabs = document.querySelectorAll('[id^="tab-"]');
     const tab = tabs[i] as HTMLElement;
-    tab.classList.add("bg-orange-300");
+    tab.classList.add("bg-color3");
     for (let j = 0; j < tabs.length; j++) {
-      if (j != i) tabs[j].classList.remove("bg-orange-300");
+      if (j != i) tabs[j].classList.remove("bg-color3");
     }
     let tab_id = tab.id.split("-")[1];
     this.local_index = parseInt(tab_id);
@@ -319,15 +324,15 @@ export class Editor {
     let changeColor = (button: HTMLElement) => {
       interface_buttons.forEach((button) => {
         let svg = button.children[0] as HTMLElement;
-        if (svg.classList.contains("text-orange-300")) {
-          svg.classList.remove("text-orange-300");
-          button.classList.remove("text-orange-300");
+        if (svg.classList.contains("text-color3")) {
+          svg.classList.remove("text-color3");
+          button.classList.remove("text-color3");
         }
       });
       button.children[0].classList.remove("text-white");
-      button.children[0].classList.add("text-orange-300");
-      button.classList.add("text-orange-300");
-      button.classList.add("fill-orange-300");
+      button.children[0].classList.add("text-color3");
+      button.classList.add("text-color3");
+      button.classList.add("fill-color3");
     };
 
     switch (mode) {
@@ -442,7 +447,7 @@ export class Editor {
 
   unfocusPlayButtons() {
     document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
-      button.children[0].classList.remove("fill-orange-300");
+      button.children[0].classList.remove("fill-color3");
       button.children[0].classList.remove("animate-pulse");
     });
   }
@@ -591,6 +596,10 @@ export class Editor {
     if (selected_theme) {
       this.updateInterfaceTheme(selected_theme);
       let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
+      // Reconfigure the view with the new theme
+      this.view.dispatch({
+        effects: this.themeCompartment.reconfigure(codeMirrorTheme),
+      });
     }
   }
 }

src/style.css

@@ -1161,10 +1161,33 @@ video {
   background-color: rgb(var(--color6) / var(--tw-bg-opacity));
 }
 
+.bg-color3 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color3) / var(--tw-bg-opacity));
+}
+
+.bg-color2 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color2) / var(--tw-bg-opacity));
+}
+
+.bg-color4 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(var(--color4) / var(--tw-bg-opacity));
+}
+
+.bg-\[--var\(color1\)\] {
+  background-color: var(--var(color1));
+}
+
 .fill-color2 {
   fill: rgb(var(--color2) / 1);
 }
 
+.fill-color3 {
+  fill: rgb(var(--color3) / 1);
+}
+
 .p-1 {
   padding: 0.25rem;
 }
@@ -1356,6 +1379,11 @@ video {
   line-height: 1rem;
 }
 
+.text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -1404,6 +1432,11 @@ video {
   color: rgb(var(--color2) / var(--tw-text-opacity));
 }
 
+.text-color6 {
+  --tw-text-opacity: 1;
+  color: rgb(var(--color6) / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }