diff --git a/source/ts/pages/settings.ts b/source/ts/pages/settings.ts
index aaaba30..aed62ba 100644
--- a/source/ts/pages/settings.ts
+++ b/source/ts/pages/settings.ts
@@ -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,
     };
   }
 
diff --git a/source/ts/utilities/themes.ts b/source/ts/utilities/themes.ts
index 869e247..e94e982 100644
--- a/source/ts/utilities/themes.ts
+++ b/source/ts/utilities/themes.ts
@@ -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 {