diff --git a/index.html b/index.html index 6e44869..83f53fd 100644 --- a/index.html +++ b/index.html @@ -300,6 +300,12 @@ +
+ + +

Editor options

diff --git a/src/DomElements.ts b/src/DomElements.ts index a7844e0..55a32f4 100644 --- a/src/DomElements.ts +++ b/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", diff --git a/src/InterfaceLogic.ts b/src/InterfaceLogic.ts index e2e39fa..f545bcf 100644 --- a/src/InterfaceLogic.ts +++ b/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 `` + }).join(""); // Populate the font family selector const doughNudgeRange = app.interface.dough_nudge_range as HTMLInputElement; doughNudgeRange.value = app.dough_nudge.toString(); diff --git a/src/main.ts b/src/main.ts index 7bfffc5..a231af2 100644 --- a/src/main.ts +++ b/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 {