Skip to content

Refactor theme mechanism #1637

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mutatrum wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Refactor theme mechanism #1637

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c5b7d31
Add multicolor dreamcoat
mutatrum Mar 26, 2026
9b9643d
Color value uppercase
mutatrum Mar 28, 2026
78d36f2
Set heatmap text with constrast-color
mutatrum Apr 24, 2026
3916ee5
Use primary color for contrast-color
mutatrum Apr 24, 2026
42334f6
Also for theme page tick mark
mutatrum Apr 24, 2026
aecff4e
Merge branch 'master' into technicolor-dreamcoat
WantClue May 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion main/http_server/axe-os/src/app/components/design/design-component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
position: relative;

.selected-icon {
color: white;
color: contrast-color(var(--dot-bg));
font-size: 1rem;
position: absolute;
top: 50%;
Expand Down
44 changes: 44 additions & 0 deletions main/http_server/axe-os/src/app/components/design/theme-config.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<div class="card">
<div class="grid">
<div class="col-12">
<h5>Color Scheme</h5>
<div class="flex gap-3">
<div class="flex align-items-center">
<p-radioButton name="colorScheme" [value]="'dark'" [(ngModel)]="selectedScheme"
(onClick)="changeColorScheme('dark')" inputId="dark"></p-radioButton>
<label for="dark" class="ml-2">Dark</label>
</div>
<div class="flex align-items-center">
<p-radioButton name="colorScheme" [value]="'light'" [(ngModel)]="selectedScheme"
(onClick)="changeColorScheme('light')" inputId="light"></p-radioButton>
<label for="light" class="ml-2">Light</label>
</div>
</div>
</div>

<div class="col-12 mt-4">
<h5>Theme Color</h5>

@mutatrum mutatrum Mar 28, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is extracted from theme-config.component.ts‎, only change is Theme Colors -> Theme Color

<div class="grid gap-2">
<div *ngFor="let theme of themes" class="col-2 theme-color">
<button pButton [class]="'p-button-rounded p-button-text color-dot'"
[style.--dot-bg]="theme.primaryColor"
[style.backgroundColor]="'var(--dot-bg)'"
style="width: 2rem; height: 2rem; border: none;"
(click)="changeTheme(theme)">
<i *ngIf="theme.primaryColor === currentColor" class="pi pi-check selected-icon"></i>
</button>
<div class="text-sm mt-1">{{theme.name}}</div>
</div>
</div>
</div>

<div class="col-12 mt-4">
<h5>Custom Color</h5>
<div class="flex align-items-center gap-3">
<input type="color" [ngModel]="currentColor" (change)="onCustomColorChange($event)"
style="width: 3rem; height: 3rem; border: 1px solid var(--surface-border); border-radius: 50%; cursor: pointer; background: transparent; padding: 0;">
<span class="text-lg font-mono">{{currentColor}}</span>
</div>
</div>
</div>
</div>
294 changes: 89 additions & 205 deletions main/http_server/axe-os/src/app/components/design/theme-config.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,215 +7,82 @@ import { ThemeService } from '../../services/theme.service';
interface ThemeOption {
name: string;
primaryColor: string;
accentColors: {
[key: string]: string;
};
}

@Component({
selector: 'app-theme-config',
template: `
<div class="card">
<div class="grid">
<div class="col-12">
<h5>Color Scheme</h5>
<div class="flex gap-3">
<div class="flex align-items-center">
<p-radioButton name="colorScheme" [value]="'dark'" [(ngModel)]="selectedScheme"
(onClick)="changeColorScheme('dark')" inputId="dark"></p-radioButton>
<label for="dark" class="ml-2">Dark</label>
</div>
<div class="flex align-items-center">
<p-radioButton name="colorScheme" [value]="'light'" [(ngModel)]="selectedScheme"
(onClick)="changeColorScheme('light')" inputId="light"></p-radioButton>
<label for="light" class="ml-2">Light</label>
</div>
</div>
</div>

<div class="col-12 mt-4">
<h5>Theme Colors</h5>
<div class="grid gap-2">
<div *ngFor="let theme of themes" class="col-2 theme-color">
<button pButton [class]="'p-button-rounded p-button-text color-dot'"
[style.backgroundColor]="theme.primaryColor"
style="width: 2rem; height: 2rem; border: none;"
(click)="changeTheme(theme)">
<i *ngIf="theme.primaryColor === currentColor" class="pi pi-check selected-icon"></i>
</button>
<div class="text-sm mt-1">{{theme.name}}</div>
</div>
</div>
</div>
</div>
</div>
`,
templateUrl: './theme-config.component.html',
styleUrls: ['./design-component.scss']
})
export class ThemeConfigComponent implements OnInit {
selectedScheme: string;
currentColor: string = '';
themes: ThemeOption[] = [
{
name: 'Orange',
primaryColor: '#F7931A',
accentColors: {
'--primary-color': '#F7931A',
'--primary-color-text': '#ffffff',
'--highlight-bg': '#F7931A',
'--highlight-text-color': '#ffffff',
'--focus-ring': '0 0 0 0.2rem rgba(247,147,26,0.2)',
// PrimeNG Slider
'--slider-bg': '#dee2e6',
'--slider-range-bg': '#F7931A',
'--slider-handle-bg': '#F7931A',
// Progress Bar
'--progressbar-bg': '#dee2e6',
'--progressbar-value-bg': '#F7931A',
// PrimeNG Checkbox
'--checkbox-border': '#F7931A',
'--checkbox-bg': '#F7931A',
'--checkbox-hover-bg': '#e58617',
// PrimeNG Button
'--button-bg': '#F7931A',
'--button-hover-bg': '#e58617',
'--button-focus-shadow': '0 0 0 2px #ffffff, 0 0 0 4px #F7931A',
// Toggle button
'--togglebutton-bg': '#F7931A',
'--togglebutton-border': '1px solid #F7931A',
'--togglebutton-hover-bg': '#e58617',
'--togglebutton-hover-border': '1px solid #e58617',
'--togglebutton-text-color': '#ffffff'
}
},
{
name: 'Red',
primaryColor: '#F80421',
accentColors: {
'--primary-color': '#F80421',
'--primary-color-text': '#ffffff',
'--highlight-bg': '#F80421',
'--highlight-text-color': '#ffffff',
'--focus-ring': '0 0 0 0.2rem rgba(255,64,50,0.2)',
// PrimeNG Slider
'--slider-bg': '#dee2e6',
'--slider-range-bg': '#F80421',
'--slider-handle-bg': '#F80421',
// Progress Bar
'--progressbar-bg': '#dee2e6',
'--progressbar-value-bg': '#F80421',
// PrimeNG Checkbox
'--checkbox-border': '#F80421',
'--checkbox-bg': '#F80421',
'--checkbox-hover-bg': '#e63c2e',
// PrimeNG Button
'--button-bg': '#F80421',
'--button-hover-bg': '#e63c2e',
'--button-focus-shadow': '0 0 0 2px #ffffff, 0 0 0 4px #F80421',
// Toggle button
'--togglebutton-bg': '#F80421',
'--togglebutton-border': '1px solid #F80421',
'--togglebutton-hover-bg': '#e63c2e',
'--togglebutton-hover-border': '1px solid #e63c2e',
'--togglebutton-text-color': '#ffffff'
}
},
{
name: 'Blue',
primaryColor: '#2196f3',
accentColors: {
'--primary-color': '#2196f3',
'--primary-color-text': '#ffffff',
'--highlight-bg': '#2196f3',
'--highlight-text-color': '#ffffff',
'--focus-ring': '0 0 0 0.2rem rgba(33,150,243,0.2)',
// PrimeNG Slider
'--slider-bg': '#dee2e6',
'--slider-range-bg': '#2196f3',
'--slider-handle-bg': '#2196f3',
// Progress Bar
'--progressbar-bg': '#dee2e6',
'--progressbar-value-bg': '#2196f3',
// PrimeNG Checkbox
'--checkbox-border': '#2196f3',
'--checkbox-bg': '#2196f3',
'--checkbox-hover-bg': '#1e88e5',
// PrimeNG Button
'--button-bg': '#2196f3',
'--button-hover-bg': '#1e88e5',
'--button-focus-shadow': '0 0 0 2px #ffffff, 0 0 0 4px #2196f3',
// Toggle button
'--togglebutton-bg': '#2196f3',
'--togglebutton-border': '1px solid #2196f3',
'--togglebutton-hover-bg': '#1e88e5',
'--togglebutton-hover-border': '1px solid #1e88e5',
'--togglebutton-text-color': '#ffffff'
}
},
{
name: 'Green',
primaryColor: '#4caf50',
accentColors: {
'--primary-color': '#4caf50',
'--primary-color-text': '#ffffff',
'--highlight-bg': '#4caf50',
'--highlight-text-color': '#ffffff',
'--focus-ring': '0 0 0 0.2rem rgba(76,175,80,0.2)',
// PrimeNG Slider
'--slider-bg': '#dee2e6',
'--slider-range-bg': '#4caf50',
'--slider-handle-bg': '#4caf50',
// Progress Bar
'--progressbar-bg': '#dee2e6',
'--progressbar-value-bg': '#4caf50',
// PrimeNG Checkbox
'--checkbox-border': '#4caf50',
'--checkbox-bg': '#4caf50',
'--checkbox-hover-bg': '#43a047',
// PrimeNG Button
'--button-bg': '#4caf50',
'--button-hover-bg': '#43a047',
'--button-focus-shadow': '0 0 0 2px #ffffff, 0 0 0 4px #4caf50',
// Toggle button
'--togglebutton-bg': '#4caf50',
'--togglebutton-border': '1px solid #4caf50',
'--togglebutton-hover-bg': '#43a047',
'--togglebutton-hover-border': '1px solid #43a047',
'--togglebutton-text-color': '#ffffff'
}
},
{
name: 'Purple',
primaryColor: '#b340fa',
accentColors: {
'--primary-color': '#b340fa',
'--primary-color-text': '#ffffff',
'--highlight-bg': '#b340fa',
'--highlight-text-color': '#ffffff',
'--focus-ring': '0 0 0 0.2rem rgba(156,39,176,0.2)',
// PrimeNG Slider
'--slider-bg': '#dee2e6',
'--slider-range-bg': '#b340fa',
'--slider-handle-bg': '#b340fa',
// Progress Bar
'--progressbar-bg': '#dee2e6',
'--progressbar-value-bg': '#b340fa',
// PrimeNG Checkbox
'--checkbox-border': '#b340fa',
'--checkbox-bg': '#b340fa',
'--checkbox-hover-bg': '#8e24aa',
// PrimeNG Button
'--button-bg': '#b340fa',
'--button-hover-bg': '#8e24aa',
'--button-focus-shadow': '0 0 0 2px #ffffff, 0 0 0 4px #b340fa',
// Toggle button
'--togglebutton-bg': '#b340fa',
'--togglebutton-border': '1px solid #b340fa',
'--togglebutton-hover-bg': '#8e24aa',
'--togglebutton-hover-border': '1px solid #8e24aa',
'--togglebutton-text-color': '#ffffff'
}
}
// === Reds & Oranges (energetic & warm) ===
{ name: 'Bright Red', primaryColor: '#F80421' },
{ name: 'Coral Red', primaryColor: '#FF5252' },
{ name: 'Tomato Red', primaryColor: '#FF6347' },
{ name: 'Burnt Orange', primaryColor: '#E64A19' },
{ name: 'Vivid Orange', primaryColor: '#FF7A00' },
{ name: 'Bitcoin Orange', primaryColor: '#F7931A' },

// === Yellows & Golds ===
{ name: 'Golden Amber', primaryColor: '#FFB300' },
{ name: 'Metallic Gold', primaryColor: '#E6B800' },
{ name: 'Lemon Yellow', primaryColor: '#FFDD00' },
{ name: 'Chartreuse', primaryColor: '#C0D000' },

// === Greens ===
{ name: 'Emerald Green', primaryColor: '#4CAF50' },
{ name: 'Lime Green', primaryColor: '#8BC34A' },
{ name: 'Mint Green', primaryColor: '#4DB6AC' },
{ name: 'Spring Green', primaryColor: '#66FF99' },
{ name: 'Olive', primaryColor: '#808000' },

// === Teals & Cyans ===
{ name: 'Forest Teal', primaryColor: '#00796B' },
{ name: 'Bright Cyan', primaryColor: '#00BCD4' },
{ name: 'Turquoise', primaryColor: '#40E0D0' },
{ name: 'Aqua', primaryColor: '#00FFFF' },

// === Blues ===
{ name: 'Sky Blue', primaryColor: '#29B6F6' },
{ name: 'Light Blue', primaryColor: '#81D4FA' },
{ name: 'Deep Blue', primaryColor: '#1976D2' },
{ name: 'Royal Blue', primaryColor: '#2A5CDB' },
{ name: 'Indigo', primaryColor: '#3F51B5' },
{ name: 'Navy Blue', primaryColor: '#1A3C7E' },
{ name: 'Steel Blue', primaryColor: '#4682B4' },

// === Purples & Violets ===
{ name: 'Hot Pink', primaryColor: '#E91E63' },
{ name: 'Rose Pink', primaryColor: '#FF4081' },
{ name: 'Magenta Purple', primaryColor: '#9C27B0' },
{ name: 'Deep Violet', primaryColor: '#512DA8' },
{ name: 'Lavender', primaryColor: '#9575CD' },
{ name: 'Plum', primaryColor: '#9B2A6E' },
{ name: 'Orchid', primaryColor: '#DA70D6' },

// === Browns & Neutrals ===
{ name: 'Earth Brown', primaryColor: '#795548' },
{ name: 'Warm Taupe', primaryColor: '#8D6E63' },
{ name: 'Chocolate', primaryColor: '#5D4037' },
{ name: 'Slate Grey', primaryColor: '#607D8B' },
{ name: 'Blue Grey', primaryColor: '#455A64' },
{ name: 'Cool Grey', primaryColor: '#78909C' },

// === Additional Distinct Accents ===
{ name: 'Peach', primaryColor: '#FFAB91' },
{ name: 'Apricot', primaryColor: '#FFD8B1' },
{ name: 'Sand', primaryColor: '#E0C9A8' },
{ name: 'Terracotta', primaryColor: '#E07A5F' },
{ name: 'Rust', primaryColor: '#B74C2E' },
{ name: 'Crimson', primaryColor: '#B71C1C' },
{ name: 'Berry', primaryColor: '#8E24AA' },
{ name: 'Periwinkle', primaryColor: '#8C9EFF' },
{ name: 'Electric Purple', primaryColor: '#BB86FC' },
{ name: 'Neon Green', primaryColor: '#39FF14' },
{ name: 'Acid Lime', primaryColor: '#CCFF00' }
];

private destroy$ = new Subject<void>();
Expand All @@ -236,9 +103,10 @@ export class ThemeConfigComponent implements OnInit {
if (settings.colorScheme) {
this.selectedScheme = settings.colorScheme;
}
if (settings.accentColors) {
this.applyThemeColors(settings.accentColors);
this.currentColor = settings.accentColors['--primary-color'];
if (settings.primaryColor) {
this.currentColor = settings.primaryColor.toUpperCase();
const accentColors = ThemeService.generateThemeVariables(this.currentColor);
this.applyThemeColors(accentColors);
}
}
},
Expand All @@ -263,20 +131,36 @@ export class ThemeConfigComponent implements OnInit {
config.colorScheme = scheme;
this.layoutService.config.set(config);

this.themeService.saveThemeSettings({ colorScheme: scheme })
this.themeService.saveThemeSettings({ colorScheme: scheme, primaryColor: this.currentColor })
.pipe(takeUntil(this.destroy$))
.subscribe({
error: (error) => console.error('Error saving theme settings:', error)
});
}

changeTheme(theme: ThemeOption) {
this.applyThemeColors(theme.accentColors);
this.currentColor = theme.primaryColor;
const accentColors = ThemeService.generateThemeVariables(this.currentColor);
this.applyThemeColors(accentColors);

this.themeService.saveThemeSettings({
colorScheme: this.selectedScheme,
primaryColor: this.currentColor
}).pipe(takeUntil(this.destroy$))
.subscribe({
error: (error) => console.error('Error saving theme settings:', error)
});
}

onCustomColorChange(event: any) {
const color = event.target.value;
this.currentColor = color.toUpperCase();
const accentColors = ThemeService.generateThemeVariables(this.currentColor);
this.applyThemeColors(accentColors);

this.themeService.saveThemeSettings({
colorScheme: this.selectedScheme,
accentColors: theme.accentColors
primaryColor: this.currentColor
}).pipe(takeUntil(this.destroy$))
.subscribe({
error: (error) => console.error('Error saving theme settings:', error)
Expand Down
Loading
Loading