From fb4d311ba845597885bded8a82d04f2a0aa05873 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Fri, 15 Dec 2023 16:56:54 +0100
Subject: [PATCH] slow and tedious progress

---
 index.html         | 10 +++++-----
 src/EditorSetup.ts |  5 ++++-
 src/main.ts        | 27 ++++++++++++++++++---------
 src/style.css      | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 60 insertions(+), 15 deletions(-)
diff --git a/index.html b/index.html
index 5b60493..6e44869 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,6 @@
   <style>
     body {
       font-family: "Arial";
-      background-color: "red";
 			overflow: hidden;
 			position: fixed;
 			width: 100vw;
@@ -66,12 +65,13 @@
 
   </style>
   <body id="all" class="z-0 overflow-y-hidden bg-background">
+    <h1 class="text-3xl text-color5">Portez donc un whisky à ce juge blond qui fume</h1>
 		<!-- The header is hidden on smaller devices -->
     <header class="py-0 block neutral-900">
-      <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center">
+      <div id="topbar" class="mx-auto flex flex-wrap pl-2 py-1 flex-row items-center bg-color5">
         <a class="flex title-font font-medium items-center mb-0">
           <img id="topos-logo" src="topos_frog.svg" class="w-12 h-12 text-black p-2 rounded-full fill-color2" alt="Topos Frog Logo" />
-         <input id="universe-viewer" class="hidden transparent xl:block ml-4 text-2xl placeholder-color2" id="renamer" type="text" placeholder="Topos">
+         <input id="universe-viewer" class="hidden transparent xl:block ml-4 text-color6 text-2xl placeholder-color2" id="renamer" type="text" placeholder="Topos">
 
         </a>
         <nav class="py-2 flex flex-wrap items-center text-base absolute right-0">
@@ -126,8 +126,8 @@
 
     <div id="documentation" class="hidden">
       <div id="documentation-page" class="flex flex-row transparent">
-        <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 lineHighlight">
-          <nav class="text-xl sm:text-sm overflow-y-scroll mb-24">
+        <aside class="w-1/8 flex-shrink-0 h-screen overflow-y-auto p-1 lg:p-6 bg-[--var(color1)]">
+          <nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-color4">
             <details class="" open>
               <summary class="font-semibold lg:text-xl text-orange-300">Basics</summary>
               <div class="flex flex-col">
diff --git a/src/EditorSetup.ts b/src/EditorSetup.ts
index 624ca14..f4b959d 100644
--- a/src/EditorSetup.ts
+++ b/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();
diff --git a/src/main.ts b/src/main.ts
index 067a0da..460d453 100644
--- a/src/main.ts
+++ b/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),
+      });
     }
   }
 }
diff --git a/src/style.css b/src/style.css
index d17a0d2..0b5ea5b 100644
--- a/src/style.css
+++ b/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;
 }
