Write the logic template for updating themes

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">

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,
 });

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();