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

feat: add Mocha theme with custom styles and transitions

Browse Source
This commit is contained in:
Litruv
2026-03-25 06:20:47 +11:00
parent 9a00375568
commit da3983d5c4
3 changed files with 237 additions and 3 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 { createContext, useContext, useEffect, useMemo, useState } from 'react';
import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
import { butterTheme, darkTheme, discordTheme, discordDarkerTheme, silverTheme, twilightTheme } from '../../colors.css';
import { butterTheme, darkTheme, discordTheme, discordDarkerTheme, mochaTheme, silverTheme, twilightTheme } from '../../colors.css';
import { settingsAtom } from '../state/settings';
import { useSetting } from '../state/hooks/settings';
@@ -52,9 +52,14 @@ export const TwilightTheme: Theme = {
kind: ThemeKind.Dark,
classNames: ['twilight-theme', twilightTheme, onDarkFontWeight, 'prism-dark'],
};
export const MochaTheme: Theme = {
id: 'mocha-theme',
kind: ThemeKind.Dark,
classNames: ['mocha-theme', mochaTheme, onDarkFontWeight, 'prism-dark'],
};
export const useThemes = (): Theme[] => {
const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, DiscordTheme, DiscordDarkerTheme, TwilightTheme], []);
const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, DiscordTheme, DiscordDarkerTheme, TwilightTheme, MochaTheme], []);
return themes;
};
@@ -69,6 +74,7 @@ export const useThemeNames = (): Record<string, string> =>
[DiscordTheme.id]: 'Discord',
[DiscordDarkerTheme.id]: 'Discord Darker',
[TwilightTheme.id]: 'Twilight',
[MochaTheme.id]: 'Mocha',
}),
[]
);