This commit is contained in:
2025-11-13 18:08:38 +01:00
parent 1dc540582d
commit 53adb131e0
9 changed files with 75 additions and 193 deletions

View File

@ -25,7 +25,7 @@
import { loadLastProjectId } from "./lib/project-system/persistence";
import { createAppContext, setAppContext } from "./lib/contexts/app-context";
import type { ProjectMode } from "./lib/project-system/types";
import { themes } from "./lib/themes";
import { themes, applyTheme } from "./lib/themes";
import {
Save,
Share2,
@ -239,52 +239,9 @@
}
$effect(() => {
if (typeof document !== 'undefined') {
const themeName = $editorSettings.theme;
const theme = themes[themeName];
if (theme) {
const root = document.documentElement.style;
root.setProperty('--bg-color', theme.colors.background);
root.setProperty('--surface-color', theme.colors.surface);
root.setProperty('--border-color', theme.colors.border);
root.setProperty('--text-color', theme.colors.text);
root.setProperty('--text-secondary', theme.colors.textSecondary);
root.setProperty('--accent-color', theme.colors.accent);
root.setProperty('--accent-hover', theme.colors.accentHover);
root.setProperty('--input-bg', theme.colors.input);
root.setProperty('--input-border', theme.colors.inputBorder);
root.setProperty('--button-bg', theme.colors.button);
root.setProperty('--button-hover', theme.colors.buttonHover);
root.setProperty('--danger-color', theme.colors.danger);
root.setProperty('--danger-hover', theme.colors.dangerHover);
root.setProperty('--editor-background', theme.editor.background);
root.setProperty('--editor-foreground', theme.editor.foreground);
root.setProperty('--editor-caret', theme.editor.caret);
root.setProperty('--editor-selection', theme.editor.selection);
root.setProperty('--editor-active-line', theme.editor.activeLine);
root.setProperty('--editor-gutter', theme.editor.gutter);
root.setProperty('--editor-gutter-text', theme.editor.gutterText);
root.setProperty('--editor-active-line-gutter', theme.editor.activeLineGutter);
root.setProperty('--editor-line-number', theme.editor.lineNumber);
root.setProperty('--syntax-keyword', theme.syntax.keyword);
root.setProperty('--syntax-operator', theme.syntax.operator);
root.setProperty('--syntax-string', theme.syntax.string);
root.setProperty('--syntax-number', theme.syntax.number);
root.setProperty('--syntax-boolean', theme.syntax.boolean);
root.setProperty('--syntax-comment', theme.syntax.comment);
root.setProperty('--syntax-function', theme.syntax.function);
root.setProperty('--syntax-class', theme.syntax.class);
root.setProperty('--syntax-variable', theme.syntax.variable);
root.setProperty('--syntax-property', theme.syntax.property);
root.setProperty('--syntax-constant', theme.syntax.constant);
root.setProperty('--syntax-type', theme.syntax.type);
root.setProperty('--syntax-tag', theme.syntax.tag);
root.setProperty('--syntax-attribute', theme.syntax.attribute);
}
const theme = themes[$editorSettings.theme];
if (theme) {
applyTheme(theme);
}
});
@ -600,7 +557,7 @@
padding: var(--space-sm);
background-color: var(--border-color);
color: var(--text-color);
border: 1px solid #555;
border: 1px solid var(--border-color);
cursor: pointer;
display: flex;
align-items: center;
@ -609,7 +566,7 @@
}
.icon-button:hover:not(:disabled) {
background-color: #444;
background-color: var(--button-hover);
border-color: var(--accent-color);
}
@ -623,12 +580,12 @@
}
.icon-button.stop-button:not(:disabled) {
color: #ff6b6b;
color: var(--danger-color);
}
.icon-button.stop-button:hover:not(:disabled) {
color: #ff5252;
border-color: #ff5252;
color: var(--danger-hover);
border-color: var(--danger-hover);
}
h3 {
@ -705,10 +662,10 @@
}
.enable-audio-button:hover {
background-color: #535bdb;
background-color: var(--accent-hover);
}
.enable-audio-button:active {
background-color: var(--accent-hover);
background-color: var(--accent-color);
}
</style>