peterstockings/function
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Add light/dark theme with toggle in navbar (dark theme styling incomplete - dont care for now)

Browse Source
This commit is contained in:
Peter Stockings
2025-11-23 22:00:41 +11:00
parent fc494a9355
commit 89a17f68ab
15 changed files with 463 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
static/js/mithril/editor.js
View File

@@ -57,7 +57,12 @@ const Editor = {
oncreate() {
this.editorJS = ace.edit("js-editor");
this.editorJS.setOptions({ maxLines: 100 });
this.editorJS.setTheme("ace/theme/github_dark");
// Determine initial theme
const isDark = document.documentElement.classList.contains('dark');
const theme = isDark ? "ace/theme/monokai" : "ace/theme/chrome";
this.editorJS.setTheme(theme);
this.editorJS.session.setMode(
this.runtime === "python" ? "ace/mode/python" : "ace/mode/javascript"
);
@@ -70,7 +75,7 @@ const Editor = {
this.editorJSON = ace.edit("json-editor");
this.editorJSON.setOptions({ maxLines: 100 });
this.editorJSON.setTheme("ace/theme/github_dark");
this.editorJSON.setTheme(theme);
this.editorJSON.session.setMode("ace/mode/json");
this.editorJSON.setValue(this.jsonValue, -1);
@@ -78,6 +83,20 @@ const Editor = {
this.jsonValue = this.editorJSON.getValue();
m.redraw();
});
// Listen for theme changes
this.themeListener = (e) => {
const newTheme = e.detail.theme === 'dark' ? "ace/theme/monokai" : "ace/theme/chrome";
this.editorJS.setTheme(newTheme);
this.editorJSON.setTheme(newTheme);
};
window.addEventListener('themeChanged', this.themeListener);
},
onremove() {
if (this.themeListener) {
window.removeEventListener('themeChanged', this.themeListener);
}
},
async execute() {