add more themes

app/hooks/use-themes.tsx

@@ -6,6 +6,13 @@ export function useThemes() {
 	const [theme, setTheme] = useLocalStorage<ThemeName>({
 		key: "theme",
 		defaultValue: "dracula",
+		serialize: (value) => value,
+		deserialize: (value) => {
+			if (value !== undefined && Object.keys(themes).includes(value)) {
+				return value as ThemeName;
+			}
+			return "dracula";
+		},
 	});
 
 	return { themes, currentThemeName: theme, setCurrentThemeName: setTheme };

app/layouts/select-theme-layout.tsx

@@ -4,6 +4,7 @@ import {
 	AppShell,
 	Burger,
 	Group,
+	ScrollArea,
 	Stack,
 	Text,
 	Title,
@@ -84,7 +85,7 @@ export default function Layout() {
 				</Group>
 			</AppShell.Header>
 			<AppShell.Navbar p="md" className={surfaceClasses["surface"]}>
-				<Stack>
+				<AppShell.Section>
 					<Group justify="space-between">
 						<Stack gap={0}>
 							<Title order={5}>Choose a theme</Title>
@@ -95,7 +96,9 @@ export default function Layout() {
 
 						<SchemeToggleButton />
 					</Group>
+				</AppShell.Section>
 
+				<AppShell.Section grow my="md" component={ScrollArea}>
 					<Stack gap="xs">
 						{sortedThemeNames.map((themeName) => (
 							<SelectThemeButton
@@ -104,7 +107,7 @@ export default function Layout() {
 							/>
 						))}
 					</Stack>
-				</Stack>
+				</AppShell.Section>
 			</AppShell.Navbar>
 			<AppShell.Main>
 				<Outlet />

app/themes/corporate.ts

@@ -0,0 +1,48 @@
+import { createMantineTheme } from "~/lib/create-mantine-theme";
+import { Theme } from "~/lib/theme";
+
+export const corporate: Theme = {
+	label: "💼 Corporate",
+	mantineTheme: createMantineTheme({
+		baseHue: 0,
+		baseSaturation: 0,
+		colors: {
+			primary: [
+				"#ecf4ff",
+				"#dce4f5",
+				"#b9c7e2",
+				"#94a8d0",
+				"#748dc0",
+				"#5f7cb7",
+				"#5474b4",
+				"#44639f",
+				"#3a5890",
+				"#2c4b80",
+			],
+			secondary: [
+				"#f1f4fe",
+				"#e4e6ed",
+				"#c8cad3",
+				"#a9adb9",
+				"#9094a3",
+				"#7f8496",
+				"#777c91",
+				"#656a7e",
+				"#595e72",
+				"#4a5167",
+			],
+			tertiary: [
+				"#f7f3f2",
+				"#e8e6e5",
+				"#d2c9c6",
+				"#bdaaa4",
+				"#ab9087",
+				"#a17f74",
+				"#9d766a",
+				"#896459",
+				"#7b594e",
+				"#6d4b40",
+			],
+		},
+	}),
+};

app/themes/halloween.ts

@@ -0,0 +1,48 @@
+import { createMantineTheme } from "~/lib/create-mantine-theme";
+import { Theme } from "~/lib/theme";
+
+export const halloween: Theme = {
+	label: "🎃 Halloween",
+	mantineTheme: createMantineTheme({
+		baseHue: 30,
+		baseSaturation: 20,
+		colors: {
+			primary: [
+				"#fff0e4",
+				"#ffe0cf",
+				"#fac0a1",
+				"#f69e6e",
+				"#f28043",
+				"#f06e27",
+				"#f06418",
+				"#d6530c",
+				"#bf4906",
+				"#a73c00",
+			],
+			secondary: [
+				"#effde7",
+				"#e1f8d4",
+				"#c3efab",
+				"#a2e67e",
+				"#87de58",
+				"#75d93f",
+				"#6bd731",
+				"#59be23",
+				"#4da91b",
+				"#3d920d",
+			],
+			tertiary: [
+				"#faedff",
+				"#edd9f7",
+				"#d8b1ea",
+				"#c186dd",
+				"#ae62d2",
+				"#a34bcb",
+				"#9d3fc9",
+				"#8931b2",
+				"#7a2aa0",
+				"#6b218d",
+			],
+		},
+	}),
+};

app/themes/index.ts

@@ -1,13 +1,29 @@
 import { ThemeName } from "~/lib/theme";
 import { blue } from "./blue";
 import { christmas } from "./christmas";
+import { corporate } from "./corporate";
 import { dracula } from "./dracula";
 import { forest } from "./forest";
+import { halloween } from "./halloween";
+import { military } from "./military";
 import { pink } from "./pink";
 import { red } from "./red";
+import { synthwave } from "./synthwave";
 import { yellow } from "./yellow";
 
-export const themes = { christmas, dracula, forest, pink, yellow, red, blue };
+export const themes = {
+	christmas,
+	dracula,
+	forest,
+	pink,
+	yellow,
+	red,
+	blue,
+	halloween,
+	corporate,
+	synthwave,
+	military,
+};
 
 export const sortedThemeNames = Object.keys(themes)
 	.map((key) => key as ThemeName)

app/themes/military.ts

@@ -0,0 +1,48 @@
+import { createMantineTheme } from "~/lib/create-mantine-theme";
+import { Theme } from "~/lib/theme";
+
+export const military: Theme = {
+	label: "🪖 Military",
+	mantineTheme: createMantineTheme({
+		baseHue: 120,
+		baseSaturation: 10,
+		colors: {
+			primary: [
+				"#f5faf0",
+				"#e9f3df",
+				"#cfe5ba",
+				"#b4d892",
+				"#9dcc70",
+				"#8ec55b",
+				"#86c24f",
+				"#73ab40",
+				"#659837",
+				"#55832a",
+			],
+			secondary: [
+				"#f7f3f2",
+				"#e8e6e5",
+				"#d2c9c6",
+				"#bdaaa4",
+				"#ab9087",
+				"#a17f74",
+				"#9d766a",
+				"#896459",
+				"#7b594e",
+				"#6d4b40",
+			],
+			tertiary: [
+				"#f1f4fe",
+				"#e4e6ed",
+				"#c8cad3",
+				"#a9adb9",
+				"#9094a3",
+				"#7f8496",
+				"#777c91",
+				"#656a7e",
+				"#595e72",
+				"#4a5167",
+			],
+		},
+	}),
+};

app/themes/synthwave.ts

@@ -0,0 +1,48 @@
+import { createMantineTheme } from "~/lib/create-mantine-theme";
+import { Theme } from "~/lib/theme";
+
+export const synthwave: Theme = {
+	label: "🌆 Synthwave",
+	mantineTheme: createMantineTheme({
+		baseHue: 260,
+		baseSaturation: 50,
+		colors: {
+			primary: [
+				"#ffe9ff",
+				"#fed1fd",
+				"#faa1f6",
+				"#f66ef1",
+				"#f243eb",
+				"#f028e9",
+				"#f018e8",
+				"#d609ce",
+				"#bf00b9",
+				"#a700a1",
+			],
+			secondary: [
+				"#fdfce4",
+				"#f8f6d3",
+				"#f0ecaa",
+				"#e7e17c",
+				"#e0d856",
+				"#dbd33e",
+				"#d9d02f",
+				"#c0b820",
+				"#aaa317",
+				"#928d03",
+			],
+			tertiary: [
+				"#fff0e4",
+				"#ffe0cf",
+				"#fac0a1",
+				"#f69e6e",
+				"#f28043",
+				"#f06e27",
+				"#f06418",
+				"#d6530c",
+				"#bf4906",
+				"#a73c00",
+			],
+		},
+	}),
+};