feat: add Catppuccin Mocha theme and update theme handling in useTheme hook

src/app/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { butterTheme, darkTheme, discordTheme, discordDarkerTheme, mochaTheme, silverTheme, twilightTheme } from '../../colors.css';
+import { butterTheme, catppuccinMochaTheme, darkTheme, discordTheme, discordDarkerTheme, mochaTheme, silverTheme, twilightTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 
@@ -57,9 +57,14 @@ export const MochaTheme: Theme = {
   kind: ThemeKind.Dark,
   classNames: ['mocha-theme', mochaTheme, onDarkFontWeight, 'prism-dark'],
 };
+export const CatppuccinMochaTheme: Theme = {
+  id: 'catppuccin-mocha-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['catppuccin-mocha-theme', catppuccinMochaTheme, onDarkFontWeight, 'prism-dark'],
+};
 
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, DiscordTheme, DiscordDarkerTheme, TwilightTheme, MochaTheme], []);
+  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, DiscordTheme, DiscordDarkerTheme, TwilightTheme, MochaTheme, CatppuccinMochaTheme], []);
 
   return themes;
 };
@@ -75,6 +80,7 @@ export const useThemeNames = (): Record<string, string> =>
       [DiscordDarkerTheme.id]: 'Discord Darker',
       [TwilightTheme.id]: 'Twilight',
       [MochaTheme.id]: 'Mocha',
+      [CatppuccinMochaTheme.id]: 'Catppuccin Mocha',
     }),
     []
   );

src/colors.css.ts

@@ -624,3 +624,100 @@ export const mochaTheme = createTheme(color, {
     Overlay: 'rgba(0, 0, 0, 0.85)',
   },
 });
+
+export const catppuccinMochaTheme = createTheme(color, {
+  Background: {
+    Container: '#11111b',
+    ContainerHover: '#181825',
+    ContainerActive: '#1e1e2e',
+    ContainerLine: '#313244',
+    OnContainer: '#cdd6f4',
+  },
+
+  Surface: {
+    Container: '#1e1e2e',
+    ContainerHover: '#313244',
+    ContainerActive: '#45475a',
+    ContainerLine: '#585b70',
+    OnContainer: '#cdd6f4',
+  },
+
+  SurfaceVariant: {
+    Container: '#313244',
+    ContainerHover: '#45475a',
+    ContainerActive: '#585b70',
+    ContainerLine: '#6c7086',
+    OnContainer: '#cdd6f4',
+  },
+
+  Primary: {
+    Main: '#cba6f7',
+    MainHover: '#b894e0',
+    MainActive: '#a682c9',
+    MainLine: '#9470b2',
+    OnMain: '#11111b',
+    Container: '#313244',
+    ContainerHover: '#45475a',
+    ContainerActive: '#585b70',
+    ContainerLine: '#6c7086',
+    OnContainer: '#cba6f7',
+  },
+
+  Secondary: {
+    Main: '#bac2de',
+    MainHover: '#a6adc8',
+    MainActive: '#9399b2',
+    MainLine: '#7f849c',
+    OnMain: '#11111b',
+    Container: '#1e1e2e',
+    ContainerHover: '#313244',
+    ContainerActive: '#45475a',
+    ContainerLine: '#585b70',
+    OnContainer: '#cdd6f4',
+  },
+
+  Success: {
+    Main: '#a6e3a1',
+    MainHover: '#94d98e',
+    MainActive: '#82cf7b',
+    MainLine: '#70c568',
+    OnMain: '#11111b',
+    Container: '#1a2e1a',
+    ContainerHover: '#213821',
+    ContainerActive: '#284228',
+    ContainerLine: '#2f4c2f',
+    OnContainer: '#a6e3a1',
+  },
+
+  Warning: {
+    Main: '#fab387',
+    MainHover: '#f8a070',
+    MainActive: '#f68d59',
+    MainLine: '#f47a42',
+    OnMain: '#11111b',
+    Container: '#2e1f0f',
+    ContainerHover: '#3a2714',
+    ContainerActive: '#462f19',
+    ContainerLine: '#52371e',
+    OnContainer: '#fab387',
+  },
+
+  Critical: {
+    Main: '#f38ba8',
+    MainHover: '#f07494',
+    MainActive: '#ed5d80',
+    MainLine: '#ea466c',
+    OnMain: '#11111b',
+    Container: '#2e1119',
+    ContainerHover: '#3a1620',
+    ContainerActive: '#461b27',
+    ContainerLine: '#52202e',
+    OnContainer: '#f38ba8',
+  },
+
+  Other: {
+    FocusRing: 'rgba(203, 166, 247, 0.6)',
+    Shadow: 'rgba(0, 0, 0, 0.9)',
+    Overlay: 'rgba(0, 0, 0, 0.8)',
+  },
+});