added t0p themes

backend/api/migrations/0022_alter_user_theme.py

@@ -0,0 +1,18 @@
+# Generated by Django 6.0.2 on 2026-02-18 06:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0021_alter_user_theme'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='user',
+            name='theme',
+            field=models.CharField(choices=[('holy_light', 'Holy Light'), ('holy_dark', 'Holy Dark'), ('latte', 'Catppuccin Latte'), ('frappe', 'Catppuccin Frappé'), ('macchiato', 'Catppuccin Macchiato'), ('mocha', 'Catppuccin Mocha'), ('pink_pastel', 'Pink Pastel'), ('mint_pastel', 'Mint Pastel'), ('lavender_pastel', 'Lavender Pastel'), ('dracula', 'Dracula'), ('nord', 'Nordic Frost'), ('gruvbox', 'Gruvbox Retro'), ('oceanic', 'Oceanic Deep'), ('t0p_sai', 'SAI (T0P)'), ('t0p_trench', 'Trench (T0P)'), ('t0p_blurryface', 'Blurryface (T0P)'), ('t0p_clancy', 'Clancy (T0P)')], default='holy_light', max_length=20),
+        ),
+    ]

backend/api/models.py

@@ -11,10 +11,16 @@ class User(AbstractUser):
         ('macchiato', 'Catppuccin Macchiato'),
         ('mocha', 'Catppuccin Mocha'),
         ('pink_pastel', 'Pink Pastel'),
+        ('mint_pastel', 'Mint Pastel'),
+        ('lavender_pastel', 'Lavender Pastel'),
         ('dracula', 'Dracula'),
         ('nord', 'Nordic Frost'),
         ('gruvbox', 'Gruvbox Retro'),
         ('oceanic', 'Oceanic Deep'),
+        ('t0p_sai', 'SAI (T0P)'),
+        ('t0p_trench', 'Trench (T0P)'),
+        ('t0p_blurryface', 'Blurryface (T0P)'),
+        ('t0p_clancy', 'Clancy (T0P)'),
     ]
     LANGUAGE_CHOICES = [
         ('en', 'English'),

frontend/src/pages/Settings.tsx

@@ -225,6 +225,9 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
                         <ListSubheader>Light Themes</ListSubheader>
                         <MenuItem value="latte">Catppuccin Latte</MenuItem>
                         <MenuItem value="pink_pastel">Pink Pastel</MenuItem>
+                        <MenuItem value="mint_pastel">Mint Pastel</MenuItem>
+                        <MenuItem value="lavender_pastel">Lavender Pastel</MenuItem>
+                        <MenuItem value="t0p_sai">Scaled and Icy (T0P)</MenuItem>
                         
                         <Divider />
                         
@@ -236,6 +239,9 @@ const Settings: React.FC<SettingsProps> = ({ themeName, onThemeChange }) => {
                         <MenuItem value="nord">Nordic Frost</MenuItem>
                         <MenuItem value="gruvbox">Gruvbox Retro</MenuItem>
                         <MenuItem value="oceanic">Oceanic Deep</MenuItem>
+                        <MenuItem value="t0p_trench">Trench (T0P)</MenuItem>
+                        <MenuItem value="t0p_blurryface">Blurryface (T0P)</MenuItem>
+                        <MenuItem value="t0p_clancy">Clancy (T0P)</MenuItem>
                     </Select>
                 </FormControl>
 

frontend/src/theme.ts

@@ -4,10 +4,11 @@ import { flavors } from '@catppuccin/palette';
 export type CatppuccinTheme = 
     | 'holy_light' | 'holy_dark'
     | 'latte' | 'frappe' | 'macchiato' | 'mocha'
-    | 'pink_pastel' | 'dracula' | 'nord' | 'gruvbox' | 'oceanic';
+    | 'pink_pastel' | 'mint_pastel' | 'lavender_pastel' | 'dracula' | 'nord' | 'gruvbox' | 'oceanic'
+    | 't0p_sai' | 't0p_trench' | 't0p_blurryface' | 't0p_clancy';
 
 export const isLightTheme = (mode: CatppuccinTheme): boolean => {
-    return ['holy_light', 'latte', 'pink_pastel'].includes(mode);
+    return ['holy_light', 'latte', 'pink_pastel', 'mint_pastel', 'lavender_pastel', 't0p_sai'].includes(mode);
 };
 
 export const getTheme = (mode: CatppuccinTheme) => {
@@ -47,6 +48,66 @@ export const getTheme = (mode: CatppuccinTheme) => {
           primary: { hex: '#fb7185' },
           secondary: { hex: '#2dd4bf' },
       };
+  } else if (mode === 'mint_pastel') {
+      palette = {
+          base: { hex: '#f0fdf4' }, 
+          surface0: { hex: '#ffffff' }, 
+          crust: { hex: '#dcfce7' }, 
+          text: { hex: '#14532d' }, 
+          subtext0: { hex: '#16a34a' },
+          primary: { hex: '#4ade80' },
+          secondary: { hex: '#fb7185' },
+      };
+  } else if (mode === 'lavender_pastel') {
+      palette = {
+          base: { hex: '#f5f3ff' }, 
+          surface0: { hex: '#ffffff' }, 
+          crust: { hex: '#ede9fe' }, 
+          text: { hex: '#4c1d95' }, 
+          subtext0: { hex: '#7c3aed' },
+          primary: { hex: '#8b5cf6' },
+          secondary: { hex: '#facc15' },
+      };
+  } else if (mode === 't0p_sai') {
+      palette = {
+          base: { hex: '#ffffff' }, 
+          surface0: { hex: '#f8f8f8' }, 
+          crust: { hex: '#e8e8e8' }, 
+          text: { hex: '#231f20' }, 
+          subtext0: { hex: '#666666' },
+          primary: { hex: '#00d7ff' }, // Sai Cyan
+          secondary: { hex: '#ff8ad8' }, // Sai Pink
+      };
+  } else if (mode === 't0p_trench') {
+      palette = {
+          base: { hex: '#1a1a1a' }, 
+          surface0: { hex: '#242424' }, 
+          crust: { hex: '#000000' }, 
+          text: { hex: '#fce300' }, // Trench Yellow
+          subtext0: { hex: '#a0a0a0' },
+          primary: { hex: '#fce300' },
+          secondary: { hex: '#4b5320' }, // Olive
+      };
+  } else if (mode === 't0p_blurryface') {
+      palette = {
+          base: { hex: '#000000' }, 
+          surface0: { hex: '#1a1a1a' }, 
+          crust: { hex: '#000000' }, 
+          text: { hex: '#ffffff' }, 
+          subtext0: { hex: '#e31e24' },
+          primary: { hex: '#e31e24' }, // BF Red
+          secondary: { hex: '#ffffff' },
+      };
+  } else if (mode === 't0p_clancy') {
+      palette = {
+          base: { hex: '#000000' }, 
+          surface0: { hex: '#121212' }, 
+          crust: { hex: '#000000' }, 
+          text: { hex: '#ffffff' }, 
+          subtext0: { hex: '#fce300' },
+          primary: { hex: '#e31e24' }, // Clancy Red
+          secondary: { hex: '#fce300' }, // Clancy Yellow
+      };
   } else if (mode === 'dracula') {
       palette = {
           base: { hex: '#282a36' },