GlcoinCore/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2026-08-13 12:33:11 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6196 from mempool/nymkappa/fix-theme

Browse source 
[theme] if css fails to load, revert to default
This commit is contained in:
wiz 2026-01-06 00:55:56 -10:00 • committed by GitHub
commit 2d711a04e0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/components/fees-box/fees-box.component.ts
View file

@ -44,10 +44,13 @@ export class FeesBoxComponent implements OnInit, OnDestroy {
);
this.themeSubscription = this.themeService.themeChanged$.subscribe(() => {
this.setFeeGradient();
})
});
}
setFeeGradient() {
if (!this.fees || !this.themeService.mempoolFeeColors) {
return;
}
let feeLevelIndex = feeLevels.slice().reverse().findIndex((feeLvl) => this.fees.minimumFee >= feeLvl);
feeLevelIndex = feeLevelIndex >= 0 ? feeLevels.length - feeLevelIndex : feeLevelIndex;
const startColor = '#' + (this.themeService.mempoolFeeColors[feeLevelIndex - 1] || this.themeService.mempoolFeeColors[this.themeService.mempoolFeeColors.length - 1]);

22
frontend/src/app/services/theme.service.ts
View file

@ -8,7 +8,7 @@ import { StateService } from '@app/services/state.service';
providedIn: 'root'
})
export class ThemeService {
style: HTMLLinkElement;
style: HTMLLinkElement | null = null;
theme: string = 'default';
themeChanged$: Subject<string> = new Subject();
mempoolFeeColors: string[] = defaultMempoolFeeColors;
@ -17,20 +17,32 @@ export class ThemeService {
private storageService: StorageService,
private stateService: StateService,
) {
const theme = this.stateService.env.customize?.theme || this.storageService.getValue('theme-preference') || 'default';
let theme = this.stateService.env.customize?.theme || this.storageService.getValue('theme-preference') || 'default';
// theme preference must be a valid known public theme
if (!this.stateService.env.customize?.theme && !['default', 'contrast', 'softsimon'].includes(theme)) {
theme = 'default';
this.storageService.setValue('theme-preference', 'default');
}
this.apply(theme);
}
apply(theme) {
apply(theme: string): void {
if (this.theme === theme) {
return;
}
this.theme = theme;
if (theme !== 'default') {
theme === 'contrast' || theme === 'bukele' ? this.mempoolFeeColors = contrastMempoolFeeColors : this.mempoolFeeColors = defaultMempoolFeeColors;
this.mempoolFeeColors = (theme === 'contrast' || theme === 'bukele') ? contrastMempoolFeeColors : defaultMempoolFeeColors;
try {
if (!this.style) {
this.style = document.createElement('link');
this.style.rel = 'stylesheet';
this.style.href = `${theme}.css`;
document.head.appendChild(this.style);
this.style.onerror = (): void => { // something went wrong (eg the css resource does not exist, revert to default)
this.apply('default');
};
document.head.appendChild(this.style); // load the css now
} else {
this.style.href = `${theme}.css`;
}