Basics
diff --git a/src/EditorSetup.ts b/src/EditorSetup.ts
index 624ca14..f4b959d 100644
--- a/src/EditorSetup.ts
+++ b/src/EditorSetup.ts
@@ -268,6 +268,7 @@ export const editorSetup: Extension = (() => [
export const installEditor = (app: Editor) => {
app.vimModeCompartment = new Compartment();
app.hoveringCompartment = new Compartment();
+ app.themeCompartment = new Compartment();
app.completionsCompartment = new Compartment();
app.withLineNumbers = new Compartment();
app.chosenLanguage = new Compartment();
@@ -297,7 +298,9 @@ export const installEditor = (app: Editor) => {
app.settings.completions ? [jsCompletions, toposSoundCompletions] : [],
),
editorSetup,
- getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
+ app.themeCompartment.of(
+ getCodeMirrorTheme(app.getColorScheme("Tomorrow Night Burns")),
+ ),
app.chosenLanguage.of(javascript()),
];
app.dynamicPlugins = new Compartment();
diff --git a/src/main.ts b/src/main.ts
index 067a0da..460d453 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -34,6 +34,7 @@ import { makeNumberExtensions } from "./extensions/NumberExtensions";
// @ts-ignore
import { registerSW } from "virtual:pwa-register";
import colors from "./colors.json";
+import { code } from "./documentation/basics/code";
if ("serviceWorker" in navigator) {
registerSW();
@@ -53,6 +54,7 @@ export class Editor {
hidden_interface: boolean = false;
fontSize!: Compartment;
withLineNumbers!: Compartment;
+ themeCompartment!: Compartment;
vimModeCompartment!: Compartment;
hoveringCompartment!: Compartment;
completionsCompartment!: Compartment;
@@ -207,6 +209,9 @@ export class Editor {
// Loading universe from URL (if needed)
loadUniverserFromUrl(this);
+
+ // Set the color scheme for the application
+ this.readTheme("Floraverse");
}
private getBuffer(type: string): any {
@@ -294,9 +299,9 @@ export class Editor {
*/
const tabs = document.querySelectorAll('[id^="tab-"]');
const tab = tabs[i] as HTMLElement;
- tab.classList.add("bg-orange-300");
+ tab.classList.add("bg-color3");
for (let j = 0; j < tabs.length; j++) {
- if (j != i) tabs[j].classList.remove("bg-orange-300");
+ if (j != i) tabs[j].classList.remove("bg-color3");
}
let tab_id = tab.id.split("-")[1];
this.local_index = parseInt(tab_id);
@@ -319,15 +324,15 @@ export class Editor {
let changeColor = (button: HTMLElement) => {
interface_buttons.forEach((button) => {
let svg = button.children[0] as HTMLElement;
- if (svg.classList.contains("text-orange-300")) {
- svg.classList.remove("text-orange-300");
- button.classList.remove("text-orange-300");
+ if (svg.classList.contains("text-color3")) {
+ svg.classList.remove("text-color3");
+ button.classList.remove("text-color3");
}
});
button.children[0].classList.remove("text-white");
- button.children[0].classList.add("text-orange-300");
- button.classList.add("text-orange-300");
- button.classList.add("fill-orange-300");
+ button.children[0].classList.add("text-color3");
+ button.classList.add("text-color3");
+ button.classList.add("fill-color3");
};
switch (mode) {
@@ -442,7 +447,7 @@ export class Editor {
unfocusPlayButtons() {
document.querySelectorAll('[id^="play-button-"]').forEach((button) => {
- button.children[0].classList.remove("fill-orange-300");
+ button.children[0].classList.remove("fill-color3");
button.children[0].classList.remove("animate-pulse");
});
}
@@ -591,6 +596,10 @@ export class Editor {
if (selected_theme) {
this.updateInterfaceTheme(selected_theme);
let codeMirrorTheme = getCodeMirrorTheme(selected_theme);
+ // Reconfigure the view with the new theme
+ this.view.dispatch({
+ effects: this.themeCompartment.reconfigure(codeMirrorTheme),
+ });
}
}
}
diff --git a/src/style.css b/src/style.css
index d17a0d2..0b5ea5b 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1161,10 +1161,33 @@ video {
background-color: rgb(var(--color6) / var(--tw-bg-opacity));
}
+.bg-color3 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color3) / var(--tw-bg-opacity));
+}
+
+.bg-color2 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color2) / var(--tw-bg-opacity));
+}
+
+.bg-color4 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(var(--color4) / var(--tw-bg-opacity));
+}
+
+.bg-\[--var\(color1\)\] {
+ background-color: var(--var(color1));
+}
+
.fill-color2 {
fill: rgb(var(--color2) / 1);
}
+.fill-color3 {
+ fill: rgb(var(--color3) / 1);
+}
+
.p-1 {
padding: 0.25rem;
}
@@ -1356,6 +1379,11 @@ video {
line-height: 1rem;
}
+.text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+}
+
.font-bold {
font-weight: 700;
}
@@ -1404,6 +1432,11 @@ video {
color: rgb(var(--color2) / var(--tw-text-opacity));
}
+.text-color6 {
+ --tw-text-opacity: 1;
+ color: rgb(var(--color6) / var(--tw-text-opacity));
+}
+
.underline {
text-decoration-line: underline;
}
-
+