BuboBubo/oldboy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Temp: import themes from tuna

Browse Source
This commit is contained in:
Raphaël Forment
2025-11-13 18:01:46 +01:00
parent 1b35c4ccc1
commit 1dc540582d
44 changed files with 1473 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/App.svelte
View File

@ -25,6 +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 {
Save,
Share2,
@ -238,9 +239,52 @@
}
$effect(() => {
const theme = $editorSettings.theme;
if (typeof document !== 'undefined') {
document.documentElement.dataset.theme = theme;
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);
}
}
});
@ -554,8 +598,8 @@
.icon-button {
padding: var(--space-sm);
background-color: var(--color-border-default);
color: var(--color-text-primary);
background-color: var(--border-color);
color: var(--text-color);
border: 1px solid #555;
cursor: pointer;
display: flex;
@ -566,7 +610,7 @@
.icon-button:hover:not(:disabled) {
background-color: #444;
border-color: var(--color-accent-primary);
border-color: var(--accent-color);
}
.icon-button:disabled {
@ -575,7 +619,7 @@
}
.icon-button.has-changes {
color: var(--color-accent-primary);
color: var(--accent-color);
}
.icon-button.stop-button:not(:disabled) {
@ -589,11 +633,11 @@
h3 {
margin-top: 0;
color: var(--color-text-primary);
color: var(--text-color);
}
p {
color: var(--color-text-secondary);
color: var(--text-secondary);
line-height: 1.6;
}
@ -610,9 +654,9 @@
.share-url-input {
width: 100%;
padding: var(--space-md);
background-color: var(--color-surface-3);
border: 1px solid var(--color-border-default);
color: var(--color-text-primary);
background-color: var(--surface-color);
border: 1px solid var(--border-color);
color: var(--text-color);
font-size: var(--font-base);
font-family: monospace;
outline: none;
@ -620,12 +664,12 @@
}
.share-url-input:focus {
border-color: var(--color-accent-primary);
border-color: var(--accent-color);
}
.share-instructions {
font-size: var(--font-base);
color: var(--color-text-tertiary);
color: var(--text-secondary);
margin: 0;
}
@ -651,7 +695,7 @@
.enable-audio-button {
margin-top: var(--space-lg);
padding: var(--space-md) var(--space-2xl);
background-color: var(--color-accent-primary);
background-color: var(--accent-color);
color: white;
border: none;
font-size: var(--font-lg);
@ -665,6 +709,6 @@
}
.enable-audio-button:active {
background-color: var(--color-accent-primary-active);
background-color: var(--accent-hover);
}
</style>