diff --git a/src/ui/settings.mjs b/src/ui/settings.mjs
index e155ff5..6a3a3bc 100644
--- a/src/ui/settings.mjs
+++ b/src/ui/settings.mjs
@@ -1,9 +1,10 @@
'use strict';
import { getExtensionAPI, getExtensionRuntimeError } from '../extension-api.mjs';
+import { DEFAULT_VISUAL_THEME_ID, VISUAL_THEMES, getVisualTheme } from './themes.mjs';
export const SETTINGS_STORAGE_KEY = 'browser_cpp_settings';
-export const DEFAULT_SETTINGS = Object.freeze({ memoryDebugMode: false });
+export const DEFAULT_SETTINGS = Object.freeze({ memoryDebugMode: false, visualTheme: DEFAULT_VISUAL_THEME_ID });
function getStorageArea() {
return getExtensionAPI()?.storage?.local ?? null;
@@ -12,6 +13,7 @@ function getStorageArea() {
function sanitizeSettings(value) {
return {
memoryDebugMode: value?.memoryDebugMode === true,
+ visualTheme: getVisualTheme(value?.visualTheme).id,
};
}
@@ -83,6 +85,16 @@ export function createExtensionSettings({
}
return { ...current };
},
+ async setVisualTheme(themeId) {
+ current = { ...current, visualTheme: getVisualTheme(themeId).id };
+ notify();
+ try {
+ await storageSet(storage, { [SETTINGS_STORAGE_KEY]: { ...current } });
+ } catch (error) {
+ onError(error);
+ }
+ return { ...current };
+ },
subscribe(subscriber) {
subscribers.add(subscriber);
@@ -98,6 +110,7 @@ export function initSettingsPanel({ document, settings }) {
const panel = document.getElementById('settings-panel');
const closeButton = document.getElementById('btn-close-settings');
const memoryDebugToggle = document.getElementById('setting-memory-debug');
+ const themeCards = document.getElementById('setting-visual-theme-options');
if (!button || !backdrop || !panel || !closeButton || !memoryDebugToggle) {
return { destroy() {} };
@@ -118,11 +131,39 @@ export function initSettingsPanel({ document, settings }) {
if (event.key === 'Escape' && !panel.hidden) setOpen(false, true);
};
const onToggleChange = () => settings.setMemoryDebugMode(memoryDebugToggle.checked);
- const unsubscribe = settings.subscribe(({ memoryDebugMode }) => {
+ if (themeCards && document.createElement) {
+ for (const theme of VISUAL_THEMES) {
+ const label = document.createElement('label');
+ label.className = 'theme-card';
+ const input = document.createElement('input');
+ input.type = 'radio';
+ input.name = 'visual-theme';
+ input.value = theme.id;
+ input.addEventListener('change', () => settings.setVisualTheme(input.value));
+ const preview = document.createElement('span');
+ preview.className = 'theme-preview';
+ preview.setAttribute('aria-hidden', 'true');
+ preview.style.setProperty('--preview-background', theme.preview.background);
+ preview.style.setProperty('--preview-foreground', theme.preview.foreground);
+ preview.style.setProperty('--preview-accent', theme.preview.accent);
+ const name = document.createElement('span');
+ name.textContent = theme.label;
+ label.append(input, preview, name);
+ themeCards.append(label);
+ }
+ }
+ const unsubscribe = settings.subscribe(({ memoryDebugMode, visualTheme }) => {
memoryDebugToggle.checked = memoryDebugMode;
+ if (document.documentElement) document.documentElement.dataset.visualTheme = visualTheme;
+ if (themeCards) {
+ for (const input of themeCards.querySelectorAll('input[name="visual-theme"]')) {
+ input.checked = input.value === visualTheme;
+ }
+ }
});
memoryDebugToggle.checked = settings.get().memoryDebugMode;
+ if (document.documentElement) document.documentElement.dataset.visualTheme = settings.get().visualTheme;
setOpen(false);
button.addEventListener('click', onButtonClick);
closeButton.addEventListener('click', onCloseClick);
diff --git a/src/ui/styles.css b/src/ui/styles.css
index abb7437..1cb177d 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -35,6 +35,11 @@
background: var(--base);
}
+:root[data-visual-theme="vs"] { --crust:#f6f8fa; --mantle:#fff; --base:#fff; --surface0:#d0d7de; --surface1:#afb8c1; --overlay0:#57606a; --text:#1f2328; --subtext0:#57606a; --green:#1a7f37; --red:#cf222e; --yellow:#9a6700; --blue:#0969da; --mauve:#8250df; --peach:#bc4c00; }
+:root[data-visual-theme="vs-dark"] { --crust:#181818; --mantle:#202020; --base:#1e1e1e; --surface0:#2d2d30; --surface1:#3e3e42; --overlay0:#858585; --text:#d4d4d4; --subtext0:#a0a0a0; --green:#89d185; --red:#f48771; --yellow:#dcdcaa; --blue:#569cd6; --mauve:#c586c0; --peach:#ce9178; }
+:root[data-visual-theme="hc-light"] { --crust:#fff; --mantle:#fff; --base:#fff; --surface0:#e5e5e5; --surface1:#6f6f6f; --overlay0:#333; --text:#000; --subtext0:#333; --green:#064; --red:#a80000; --yellow:#704d00; --blue:#0037da; --mauve:#5b00a5; --peach:#8a3100; }
+:root[data-visual-theme="hc-black"] { --crust:#000; --mantle:#000; --base:#000; --surface0:#1f1f1f; --surface1:#fff; --overlay0:#d0d0d0; --text:#fff; --subtext0:#fff; --green:#0f0; --red:#ff6b6b; --yellow:#ff0; --blue:#3daee9; --mauve:#ff8cff; --peach:#ffb86c; }
+
body {
height: 100vh;
overflow: hidden;
@@ -213,6 +218,16 @@ select:focus {
padding: 16px;
}
+.settings-theme-fieldset { border: 0; margin: 0 0 18px; padding: 0; }
+.settings-theme-fieldset legend { font-weight: 600; margin-bottom: 10px; }
+.theme-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.theme-card { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 6px; border: 1px solid var(--surface1); border-radius: 5px; color: var(--text); cursor: pointer; font-size: 11px; }
+.theme-card:has(input:checked) { border: 2px solid var(--blue); }
+.theme-card:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
+.theme-card input { position: absolute; opacity: 0; }
+.theme-preview { height: 34px; border: 1px solid var(--surface1); border-radius: 3px; background: linear-gradient(var(--preview-background), var(--preview-background)); box-shadow: inset 5px 0 var(--preview-accent); }
+.theme-preview::after { content: 'int main()'; display: block; padding: 9px; color: var(--preview-foreground); font: 9px monospace; }
+
.settings-row {
display: flex;
align-items: flex-start;
diff --git a/src/ui/terminal.js b/src/ui/terminal.js
index f6e8900..4674138 100644
--- a/src/ui/terminal.js
+++ b/src/ui/terminal.js
@@ -36,6 +36,7 @@ import {
collectBrowserCapabilities,
selectStdinTransport,
} from './browser-capabilities.mjs';
+import { getVisualTheme } from './themes.mjs';
function moduleExports(pkg) {
return Object.prototype.hasOwnProperty.call(pkg, 'default') ? pkg['default'] : pkg;
@@ -287,6 +288,7 @@ export function createTerminal(container, {
readWorkspaceFile,
onMkdir,
onTouch,
+ visualTheme = 'browser-cpp-dark',
}) {
_onCompile = onCompile;
_onRun = onRun;
@@ -309,28 +311,7 @@ export function createTerminal(container, {
fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace",
fontSize: 13,
lineHeight: 1.4,
- theme: {
- background: '#11111b',
- foreground: '#cdd6f4',
- cursor: '#f5c2e7',
- cursorAccent: '#1e1e2e',
- black: '#45475a',
- red: '#f38ba8',
- green: '#a6e3a1',
- yellow: '#f9e2af',
- blue: '#89b4fa',
- magenta: '#cba6f7',
- cyan: '#89dceb',
- white: '#bac2de',
- brightBlack: '#585b70',
- brightRed: '#f38ba8',
- brightGreen: '#a6e3a1',
- brightYellow: '#f9e2af',
- brightBlue: '#89b4fa',
- brightMagenta:'#cba6f7',
- brightCyan: '#89dceb',
- brightWhite: '#a6adc8',
- },
+ theme: getVisualTheme(visualTheme).terminalTheme,
cursorBlink: true,
scrollback: 5000,
convertEol: false,
@@ -369,6 +350,10 @@ export function createTerminal(container, {
return term;
}
+export function setTheme(themeId) {
+ if (term) term.options.theme = { ...getVisualTheme(themeId).terminalTheme };
+}
+
/** Resize the terminal to fill its container (call after layout changes). */
export function fitTerminal() {
fitAddon?.fit();
diff --git a/src/ui/themes.mjs b/src/ui/themes.mjs
new file mode 100644
index 0000000..368d52f
--- /dev/null
+++ b/src/ui/themes.mjs
@@ -0,0 +1,44 @@
+'use strict';
+
+export const DEFAULT_VISUAL_THEME_ID = 'browser-cpp-dark';
+
+const terminal = (background, foreground, accent) => ({
+ background, foreground, cursor: accent, cursorAccent: background,
+ black: foreground, red: '#c01c28', green: '#2d7d46', yellow: '#9a6700',
+ blue: '#0969da', magenta: '#8250df', cyan: '#0a7b83', white: foreground,
+ brightBlack: '#768390', brightRed: '#d1242f', brightGreen: '#1a7f37',
+ brightYellow: '#bf8700', brightBlue: '#218bff', brightMagenta: '#a475f9',
+ brightCyan: '#1b9aaa', brightWhite: foreground,
+});
+
+export const VISUAL_THEMES = Object.freeze([
+ {
+ id: 'browser-cpp-dark', label: 'browser.cpp Dark', monacoTheme: 'browser-cpp-dark',
+ cssTokens: { crust: '#11111b', mantle: '#181825', base: '#1e1e2e', surface0: '#313244', surface1: '#45475a', overlay0: '#6c7086', text: '#cdd6f4', subtext0: '#a6adc8', green: '#a6e3a1', red: '#f38ba8', yellow: '#f9e2af', blue: '#89b4fa', mauve: '#cba6f7', peach: '#fab387' },
+ terminalTheme: terminal('#11111b', '#cdd6f4', '#f5c2e7'), preview: { background: '#1e1e2e', foreground: '#cdd6f4', accent: '#89b4fa' },
+ },
+ {
+ id: 'vs', label: 'Light', monacoTheme: 'vs',
+ cssTokens: { crust: '#f6f8fa', mantle: '#ffffff', base: '#ffffff', surface0: '#d0d7de', surface1: '#afb8c1', overlay0: '#57606a', text: '#1f2328', subtext0: '#57606a', green: '#1a7f37', red: '#cf222e', yellow: '#9a6700', blue: '#0969da', mauve: '#8250df', peach: '#bc4c00' },
+ terminalTheme: terminal('#ffffff', '#1f2328', '#0969da'), preview: { background: '#ffffff', foreground: '#1f2328', accent: '#0969da' },
+ },
+ {
+ id: 'vs-dark', label: 'Dark', monacoTheme: 'vs-dark',
+ cssTokens: { crust: '#181818', mantle: '#202020', base: '#1e1e1e', surface0: '#2d2d30', surface1: '#3e3e42', overlay0: '#858585', text: '#d4d4d4', subtext0: '#a0a0a0', green: '#89d185', red: '#f48771', yellow: '#dcdcaa', blue: '#569cd6', mauve: '#c586c0', peach: '#ce9178' },
+ terminalTheme: terminal('#181818', '#d4d4d4', '#aeafad'), preview: { background: '#1e1e1e', foreground: '#d4d4d4', accent: '#569cd6' },
+ },
+ {
+ id: 'hc-light', label: 'High Contrast Light', monacoTheme: 'hc-light',
+ cssTokens: { crust: '#ffffff', mantle: '#ffffff', base: '#ffffff', surface0: '#e5e5e5', surface1: '#6f6f6f', overlay0: '#333333', text: '#000000', subtext0: '#333333', green: '#006400', red: '#a80000', yellow: '#704d00', blue: '#0037da', mauve: '#5b00a5', peach: '#8a3100' },
+ terminalTheme: terminal('#ffffff', '#000000', '#0037da'), preview: { background: '#ffffff', foreground: '#000000', accent: '#0037da' },
+ },
+ {
+ id: 'hc-black', label: 'High Contrast Dark', monacoTheme: 'hc-black',
+ cssTokens: { crust: '#000000', mantle: '#000000', base: '#000000', surface0: '#1f1f1f', surface1: '#ffffff', overlay0: '#d0d0d0', text: '#ffffff', subtext0: '#ffffff', green: '#00ff00', red: '#ff6b6b', yellow: '#ffff00', blue: '#3daee9', mauve: '#ff8cff', peach: '#ffb86c' },
+ terminalTheme: terminal('#000000', '#ffffff', '#ffffff'), preview: { background: '#000000', foreground: '#ffffff', accent: '#ffff00' },
+ },
+]);
+
+export function getVisualTheme(id) {
+ return VISUAL_THEMES.find((theme) => theme.id === id) ?? VISUAL_THEMES[0];
+}