1
Fork 0

Sort the themes by name.

This commit is contained in:
Bauke 2022-01-28 13:10:05 +01:00
parent ac9acff203
commit e48d500a0c
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
2 changed files with 17 additions and 9 deletions

View File

@ -2,7 +2,12 @@ import {Component, html} from 'htm/preact';
import ExternalAnchor from '../components/external-anchor.js'; import ExternalAnchor from '../components/external-anchor.js';
import SharedFooter from '../components/shared-footer.js'; import SharedFooter from '../components/shared-footer.js';
import {getThemeByCssClass, setTheme, themes} from '../utilities/themes.js'; import {
defaultTheme,
getThemeByCssClass,
setTheme,
themes,
} from '../utilities/themes.js';
type Props = Record<string, unknown>; type Props = Record<string, unknown>;
@ -15,7 +20,8 @@ export default class SettingsPage extends Component<Props, State> {
super(props); super(props);
this.state = { this.state = {
selectedTheme: window.localStorage.getItem('theme') ?? themes[0].cssClass, selectedTheme:
window.localStorage.getItem('theme') ?? defaultTheme.cssClass,
}; };
} }

View File

@ -5,11 +5,13 @@ type Theme = {
name: string; name: string;
}; };
export const themes: Theme[] = [ export const defaultTheme: Theme = {
{
cssClass: 'love-dark', cssClass: 'love-dark',
name: 'Love Dark', name: 'Love Dark',
}, };
export const themes: Theme[] = [
defaultTheme,
{ {
cssClass: 'love-light', cssClass: 'love-light',
name: 'Love Light', name: 'Love Light',
@ -30,12 +32,12 @@ export const themes: Theme[] = [
cssClass: 'monokai', cssClass: 'monokai',
name: 'Monokai', name: 'Monokai',
}, },
]; ].sort((a, b) => a.name.localeCompare(b.name));
export const themeContext = createContext<Theme>(themes[0]); export const themeContext = createContext<Theme>(defaultTheme);
export function getThemeByCssClass(cssClass: string): Theme { export function getThemeByCssClass(cssClass: string): Theme {
return themes.find((theme) => theme.cssClass === cssClass) ?? themes[0]; return themes.find((theme) => theme.cssClass === cssClass) ?? defaultTheme;
} }
export function setTheme(theme: Theme): void { export function setTheme(theme: Theme): void {