holy theme

frontend/src/App.tsx

@@ -165,7 +165,7 @@ const GlobalSearch = () => {
 
 const App: React.FC = () => {
   const { i18n, t } = useTranslation();
-  const [themeName, setThemeName] = useState<CatppuccinTheme>((localStorage.getItem('theme') as CatppuccinTheme) || 'mocha');
+  const [themeName, setThemeName] = useState<CatppuccinTheme>((localStorage.getItem('theme') as CatppuccinTheme) || 'holy_dark');
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [catAnchorEl, setCatAnchorEl] = useState<null | HTMLElement>(null);
   const [categories, setCategories] = useState<{name: string, slug: string}[]>([]);

frontend/src/pages/Settings.tsx

@@ -198,6 +198,10 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
                         label={t('settings.themeLabel')}
                         onChange={(e) => onThemeChange(e.target.value as CatppuccinTheme)}
                     >
+                        <ListSubheader>Holy Energy</ListSubheader>
+                        <MenuItem value="holy_dark">Holy Dark (Default)</MenuItem>
+                        <MenuItem value="holy_light">Holy Light</MenuItem>
+
                         <ListSubheader>Light Themes</ListSubheader>
                         <MenuItem value="latte">Latte</MenuItem>
                         <MenuItem value="pink">Pastel Pink</MenuItem>

frontend/src/theme.ts

@@ -2,17 +2,38 @@ import { createTheme, type ThemeOptions } from '@mui/material/styles';
 import { flavors } from '@catppuccin/palette';
 
 export type CatppuccinTheme = 
+    | 'holy_light' | 'holy_dark'
     | 'latte' | 'pink' | 'solarized_light' | 'one_light' | 'paper'
     | 'frappe' | 'macchiato' | 'mocha' | 'atom' | 'dracula' | 'gruvbox' | 'nord' | 'cyberpunk' | 'forest';
 
 export const isLightTheme = (mode: CatppuccinTheme): boolean => {
-    return ['latte', 'pink', 'solarized_light', 'one_light', 'paper'].includes(mode);
+    return ['holy_light', 'latte', 'pink', 'solarized_light', 'one_light', 'paper'].includes(mode);
 };
 
 export const getTheme = (mode: CatppuccinTheme) => {
   let palette: any;
 
-  if (mode === 'pink') {
+  if (mode === 'holy_light') {
+      palette = {
+          base: { hex: '#ffffff' }, 
+          surface0: { hex: '#f8f9fa' }, 
+          crust: { hex: '#e9ecef' }, 
+          text: { hex: '#1a1a1a' }, 
+          subtext0: { hex: '#6c757d' },
+          mauve: { hex: '#8a2be2' }, // Holy Purple
+          pink: { hex: '#ff00ff' }, // Holy Pink/Magenta
+      };
+  } else if (mode === 'holy_dark') {
+      palette = {
+          base: { hex: '#0f0f0f' }, 
+          surface0: { hex: '#1a1a1a' }, 
+          crust: { hex: '#000000' }, 
+          text: { hex: '#ffffff' }, 
+          subtext0: { hex: '#a0a0a0' },
+          mauve: { hex: '#9d4edd' }, // Brighter Purple for Dark
+          pink: { hex: '#ff4dff' }, // Brighter Pink for Dark
+      };
+  } else if (mode === 'pink') {
       palette = {
           base: { hex: '#fdf6f7' }, 
           surface0: { hex: '#f8e1e5' }, 
@@ -117,8 +138,16 @@ export const getTheme = (mode: CatppuccinTheme) => {
       if (flavor) {
           palette = flavor.colors;
       } else {
-          palette = flavors['mocha'].colors;
-          mode = 'mocha';
+          palette = {
+              base: { hex: '#0f0f0f' }, 
+              surface0: { hex: '#1a1a1a' }, 
+              crust: { hex: '#000000' }, 
+              text: { hex: '#ffffff' }, 
+              subtext0: { hex: '#a0a0a0' },
+              mauve: { hex: '#9d4edd' },
+              pink: { hex: '#ff4dff' },
+          };
+          mode = 'holy_dark';
       }
   }