From 69cd462c6880e5b972e5c977e9014c7f39511c42 Mon Sep 17 00:00:00 2001
From: Raphael Forment <raphael.forment@gmail.com>
Date: Fri, 15 Dec 2023 15:49:33 +0100
Subject: [PATCH] Write the logic template for updating themes

---
 index.html         |  4 ++--
 src/EditorSetup.ts | 10 ++++++++++
 src/main.ts        | 18 ++++++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 89fb11f..5b60493 100644
--- a/index.html
+++ b/index.html
@@ -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 bg-color5">
-          <nav class="text-xl sm:text-sm overflow-y-scroll mb-24 bg-color6">
+        <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">
             <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 4ebd06e..fd9a625 100644
--- a/src/EditorSetup.ts
+++ b/src/EditorSetup.ts
@@ -18,6 +18,7 @@ import {
   syntaxHighlighting,
   indentOnInput,
   bracketMatching,
+  HighlightStyle,
 } from "@codemirror/language";
 import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
 import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
@@ -36,6 +37,15 @@ import { inlineHoveringTips } from "./documentation/inlineHelp";
 import { toposCompletions, soundCompletions } from "./documentation/inlineHelp";
 import { javascriptLanguage } from "@codemirror/lang-javascript";
 
+export const updateCodeMirrorTheme = (theme: {[key: string]: string}): Extension => {
+  let toposTheme = EditorView.theme({
+
+  });
+  let toposHighlightStyle = HighlightStyle.define([]);
+  return [ toposTheme, syntaxHighlighting(toposHighlightStyle),
+]
+}
+
 export const jsCompletions = javascriptLanguage.data.of({
   autocomplete: toposCompletions,
 });
diff --git a/src/main.ts b/src/main.ts
index acff630..43c4c0f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -32,6 +32,7 @@ import { installWindowBehaviors } from "./WindowBehavior";
 import { makeNumberExtensions } from "./extensions/NumberExtensions";
 // @ts-ignore
 import { registerSW } from "virtual:pwa-register";
+import colors from "./colors.json";
 
 if ("serviceWorker" in navigator) {
   registerSW();
@@ -569,6 +570,23 @@ export class Editor {
       ctx.scale(dpr, dpr);
     }
   }
+
+  private updateInterfaceTheme(selected_theme: {[key: string]: string}): void {
+    // We will update CSS variables to change the theme
+    for (const [key, value] of Object.entries(selected_theme)) {
+      document.documentElement.style.setProperty(key, value);
+    }
+  }
+
+  private readTheme(theme_name: string): void {
+    // Check if the theme exists in colors.json
+    let themes: Record<string, { [key: string]: any }> = colors;
+    let selected_theme = themes[theme_name];
+    if (selected_theme) {
+      this.updateInterfaceTheme(selected_theme);
+      updateCodeMirrorTheme(selected_theme);
+    }
+  }
 }
 
 let app = new Editor();