myxelium/Toju
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 2 Releases 36 Wiki Activity

style: Update default theme

Browse Source
This commit is contained in:
SocksOnHead
2026-05-25 16:51:44 +02:00
parent 155fe20862
commit 1259645706
23 changed files with 1206 additions and 630 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
toju-app/src/app/domains/theme/feature/settings/theme-settings/theme-settings.component.html
View File

@@ -164,6 +164,41 @@
<div class="theme-settings__workspace min-h-0 flex-1">
<aside class="theme-settings__sidebar">
<section class="theme-studio-card p-3.5">
<div class="flex items-center justify-between gap-3">
<p class="text-sm font-semibold text-foreground">Preset Themes</p>
<span class="rounded-full bg-secondary px-2.5 py-1 text-[11px] font-medium text-muted-foreground">
{{ builtInPresets.length }} built in
</span>
</div>
<div class="theme-settings__saved-theme-list mt-4">
@for (preset of builtInPresets; track preset.key) {
<button
type="button"
(click)="applyBuiltInPreset(preset.theme.meta.name)"
class="theme-settings__saved-theme-button"
[class.theme-settings__saved-theme-button--active]="activeTheme().meta.name === preset.theme.meta.name"
>
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-sm font-semibold text-foreground">{{ preset.theme.meta.name }}</p>
<p class="mt-1 font-mono text-[11px] text-muted-foreground">{{ preset.key }}</p>
</div>
@if (preset.theme.meta.name === 'Toju Website Dark') {
<span class="rounded-full bg-primary/12 px-2 py-0.5 text-[10px] font-medium text-primary">Default</span>
}
</div>
@if (preset.theme.meta.description) {
<p class="mt-2 text-xs leading-5 text-muted-foreground">{{ preset.theme.meta.description }}</p>
}
</button>
}
</div>
</section>
@if (savedThemesAvailable()) {
<section class="theme-studio-card p-3.5">
<div class="flex items-center justify-between gap-3">

9
toju-app/src/app/domains/theme/feature/settings/theme-settings/theme-settings.component.ts
View File

@@ -62,6 +62,7 @@ export class ThemeSettingsComponent {
readonly isDraftDirty = this.theme.isDraftDirty;
readonly isFullscreen = this.modal.themeStudioFullscreen;
readonly activeTheme = this.theme.activeTheme;
readonly builtInPresets = this.theme.builtInPresets;
readonly draftTheme = this.theme.draftTheme;
readonly THEME_ANIMATION_FIELDS = THEME_ANIMATION_FIELD_HINTS;
readonly animationKeys = this.theme.knownAnimationClasses;
@@ -353,6 +354,14 @@ export class ThemeSettingsComponent {
await this.themeLibrary.removeSelectedTheme();
}
applyBuiltInPreset(name: string): void {
this.theme.applyBuiltInPreset(name);
this.activeWorkspace.set('editor');
this.activeEditorTab.set('json');
this.syncCssOnlyTextFromTheme();
this.focusEditor();
}
restoreDefaultTheme(): void {
this.theme.resetToDefault('button');
this.activeWorkspace.set('editor');