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

This commit is contained in:
2026-04-10 01:36:17 +10:00
parent 13a235e99f
commit 99366b5fc4
2 changed files with 105 additions and 2 deletions

View File

@@ -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',
}),
[]
);