ui element for theme switching

index.html

@@ -300,6 +300,12 @@
                     <option value="Steps Mono Thin">Steps Mono Thin</option>
                   </select>
               </div>
+              <div class="gray-200 rounded-lg ml-0 lg:w-1/3 w-full pt-2 pb-1 mb-2">
+                <label for="theme" class="block ml-5 mb-2 font-medium sd:text-sm">Theme:</label>
+                  <select id="theme-selector" class="gray-50 ml-4 border border-gray-300 mb-2
+                  text-gray-900 text-sm rounded-lg  focus:border-blue-500 block  p-2.5 gray-700 border-gray-600 placeholder-gray-400 ">
+                  </select>
+              </div>
               <!-- Editor mode selection -->
             <div class="gray-200 rounded-lg lg:ml-4 lg:w-1/3 w-full pt-2 pb-1 mb-2">
               <p class="font-bold lg:text-xl text-sm ml-4 pb-4 underline underline-offset-4">Editor options</p>

src/DomElements.ts

@@ -43,6 +43,7 @@ export const singleElements = {
   midi_clock_checkbox: "send-midi-clock",
   midi_channels_scripts: "midi-channels-scripts",
   midi_clock_ppqn: "midi-clock-ppqn-input",
+  theme_selector: "theme-selector",
   load_demo_songs: "load-demo-songs",
   normal_mode_button: "normal-mode",
   vim_mode_button: "vim-mode",

src/InterfaceLogic.ts

@@ -1,6 +1,7 @@
 import { EditorView } from "codemirror";
 import { vim } from "@replit/codemirror-vim";
 import { type Editor } from "./main";
+import colors from "./colors.json";
 import {
   documentation_factory,
   hideDocumentation,
@@ -24,6 +25,7 @@ import { lineNumbers } from "@codemirror/view";
 import { jsCompletions } from "./EditorSetup";
 import { createDocumentationStyle } from "./DomElements";
 import { saveState } from "./WindowBehavior";
+import { f } from "zifferjs/src/tonnetz";
 
 export const installInterfaceLogic = (app: Editor) => {
   // Initialize style
@@ -289,6 +291,11 @@ export const installInterfaceLogic = (app: Editor) => {
     });
   });
 
+  app.interface.theme_selector.addEventListener("change", () => {
+    app.settings.theme = (app.interface.theme_selector as HTMLSelectElement).value;
+    app.readTheme(app.settings.theme);
+  });
+
   app.interface.settings_button.addEventListener("click", () => {
     // Populate the font selector
     const fontFamilySelect = document.getElementById(
@@ -298,6 +305,14 @@ export const installInterfaceLogic = (app: Editor) => {
       fontFamilySelect.value = app.settings.font;
     }
 
+    app.interface.theme_selector.innerHTML = "";
+    let all_themes = Object.keys(colors);
+    all_themes.sort((a, b) => {
+      return a.toLowerCase().localeCompare(b.toLowerCase());
+    });
+    app.interface.theme_selector.innerHTML = all_themes.map((color) => {
+      return `<option value="${color}">${color}</option>`
+    }).join("");
     // Populate the font family selector
     const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement;
     doughNudgeRange.value = app.dough_nudge.toString();

src/main.ts

@@ -211,7 +211,7 @@ export class Editor {
     loadUniverserFromUrl(this);
 
     // Set the color scheme for the application
-    this.readTheme("Floraverse");
+    this.readTheme("WildCherry");
   }
 
   private getBuffer(type: string): any {