Sort the themes by name.
This commit is contained in:
parent
ac9acff203
commit
e48d500a0c
|
@ -2,7 +2,12 @@ import {Component, html} from 'htm/preact';
|
|||
|
||||
import ExternalAnchor from '../components/external-anchor.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>;
|
||||
|
||||
|
@ -15,7 +20,8 @@ export default class SettingsPage extends Component<Props, State> {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
selectedTheme: window.localStorage.getItem('theme') ?? themes[0].cssClass,
|
||||
selectedTheme:
|
||||
window.localStorage.getItem('theme') ?? defaultTheme.cssClass,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
@ -5,11 +5,13 @@ type Theme = {
|
|||
name: string;
|
||||
};
|
||||
|
||||
export const defaultTheme: Theme = {
|
||||
cssClass: 'love-dark',
|
||||
name: 'Love Dark',
|
||||
};
|
||||
|
||||
export const themes: Theme[] = [
|
||||
{
|
||||
cssClass: 'love-dark',
|
||||
name: 'Love Dark',
|
||||
},
|
||||
defaultTheme,
|
||||
{
|
||||
cssClass: 'love-light',
|
||||
name: 'Love Light',
|
||||
|
@ -30,12 +32,12 @@ export const themes: Theme[] = [
|
|||
cssClass: '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 {
|
||||
return themes.find((theme) => theme.cssClass === cssClass) ?? themes[0];
|
||||
return themes.find((theme) => theme.cssClass === cssClass) ?? defaultTheme;
|
||||
}
|
||||
|
||||
export function setTheme(theme: Theme): void {
|
||||
|
|
Loading…
Reference in New Issue