litruv/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Litruv
2026-04-10 01:36:17 +10:00
parent 13a235e99f
commit 99366b5fc4
2 changed files with 105 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/hooks/useTheme.ts
View File

@@ -1,7 +1,7 @@
import { lightTheme } from 'folds'; import { lightTheme } from 'folds';
import { createContext, useContext, useEffect, useMemo, useState } from 'react'; import { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { onDarkFontWeight, onLightFontWeight } from '../../config.css'; 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 { settingsAtom } from '../state/settings';
import { useSetting } from '../state/hooks/settings'; import { useSetting } from '../state/hooks/settings';
@@ -57,9 +57,14 @@ export const MochaTheme: Theme = {
kind: ThemeKind.Dark, kind: ThemeKind.Dark,
classNames: ['mocha-theme', mochaTheme, onDarkFontWeight, 'prism-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[] => { 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; return themes;
}; };
@@ -75,6 +80,7 @@ export const useThemeNames = (): Record<string, string> =>
[DiscordDarkerTheme.id]: 'Discord Darker', [DiscordDarkerTheme.id]: 'Discord Darker',
[TwilightTheme.id]: 'Twilight', [TwilightTheme.id]: 'Twilight',
[MochaTheme.id]: 'Mocha', [MochaTheme.id]: 'Mocha',
[CatppuccinMochaTheme.id]: 'Catppuccin Mocha',
}), }),
[] []
); );

97
src/colors.css.ts
View File

@@ -624,3 +624,100 @@ export const mochaTheme = createTheme(color, {
Overlay: 'rgba(0, 0, 0, 0.85)', 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)',
},
});