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 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,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue