Write the logic template for updating themes

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