* Extended functionalities

* Added different UIs

meal-plan-frontend/src/theme/appearance.config.ts

@@ -0,0 +1,74 @@
+export type ColorThemeId = "forest" | "ocean" | "sunset" | "berry";
+export type IconStyleId = "outline" | "emoji" | "bold";
+export type AppearanceId = ColorThemeId;
+
+export interface ThemeProposal {
+  id: AppearanceId;
+  labelKey: string;
+  descriptionKey: string;
+  colorTheme: ColorThemeId;
+  iconStyle: IconStyleId;
+  swatch: string;
+}
+
+export const THEME_PROPOSALS: ThemeProposal[] = [
+  {
+    id: "forest",
+    labelKey: "appearance.forest",
+    descriptionKey: "appearance.forestDesc",
+    colorTheme: "forest",
+    iconStyle: "outline",
+    swatch: "#16774c",
+  },
+  {
+    id: "ocean",
+    labelKey: "appearance.ocean",
+    descriptionKey: "appearance.oceanDesc",
+    colorTheme: "ocean",
+    iconStyle: "outline",
+    swatch: "#2563eb",
+  },
+  {
+    id: "sunset",
+    labelKey: "appearance.sunset",
+    descriptionKey: "appearance.sunsetDesc",
+    colorTheme: "sunset",
+    iconStyle: "emoji",
+    swatch: "#d97706",
+  },
+  {
+    id: "berry",
+    labelKey: "appearance.berry",
+    descriptionKey: "appearance.berryDesc",
+    colorTheme: "berry",
+    iconStyle: "bold",
+    swatch: "#7c3aed",
+  },
+];
+
+export const NAV_ICON_EMOJI: Record<string, string> = {
+  dashboard: "📊",
+  coffee: "☕",
+  croissant: "🥐",
+  soup: "🍲",
+  moon: "🌙",
+  list: "📋",
+  book: "✏️",
+  leaf: "🥬",
+  diet: "🥗",
+  calendar: "📅",
+  cart: "🛒",
+};
+
+export type NavIconName =
+  | "dashboard"
+  | "coffee"
+  | "croissant"
+  | "soup"
+  | "moon"
+  | "list"
+  | "book"
+  | "leaf"
+  | "diet"
+  | "calendar"
+  | "cart";