Merge branch 'main' into narl.io

backend/api/models.py

@@ -4,6 +4,8 @@ from django.core.validators import MinValueValidator, MaxValueValidator
 
 class User(AbstractUser):
     THEME_CHOICES = [
+        ('holy_light', 'Holy Light'),
+        ('holy_dark', 'Holy Dark'),
         ('latte', 'Latte'),
         ('pink', 'Pastel Pink'),
         ('solarized_light', 'Solarized Light'),
@@ -23,7 +25,7 @@ class User(AbstractUser):
         ('en', 'English'),
         ('de', 'Deutsch'),
     ]
-    theme = models.CharField(max_length=20, choices=THEME_CHOICES, default='mocha')
+    theme = models.CharField(max_length=20, choices=THEME_CHOICES, default='holy_dark')
     language = models.CharField(max_length=2, choices=LANGUAGE_CHOICES, default='en')
     avatar = models.ImageField(upload_to='avatars/', blank=True, null=True)
     pending_email = models.EmailField(max_length=254, blank=True, null=True)

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';
       }
   }