Skip to content

Add Catppuccin themeset and reorganize list #725

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nushea wants to merge 6 commits into from
Closed

Add Catppuccin themeset and reorganize list #725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9a4b553
add basic catppuccin mocha theme
nushea Apr 28, 2026
8cc7f93
reworked credits text
nushea Apr 28, 2026
868ee87
added the other 3 sub-themes
nushea Apr 28, 2026
0542908
ADD - Catppuccin themes
nushea Apr 28, 2026
cf66dd1
restylized the list in the settings
nushea Apr 28, 2026
2e994b3
added changeset
nushea Apr 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/add_catppuccin_theme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
default: minor
---

Add Catppuccin themeset and reorganize list
70 changes: 47 additions & 23 deletions src/app/features/settings/about/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,23 +304,22 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
>
<li>
<Text size="T300">
{' '}
<a
href="https://github.com/cinnyapp/cinny"
rel="noreferrer noopener"
target="_blank"
>
Cinny
</a>
is ©{' '}
{', © '}
<a
href="https://github.com/ajbura"
rel="noreferrer noopener"
target="_blank"
>
Ajay Bura
</a>{' '}
used under the terms of{' '}
</a>
{', is used under the terms of '}
<a
href="https://github.com/cinnyapp/cinny/blob/dev/LICENSE"
rel="noreferrer noopener"
Expand All @@ -333,23 +332,23 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
</li>
<li>
<Text size="T300">
The{' '}
{'The '}
<a
href="https://github.com/matrix-org/matrix-js-sdk"
rel="noreferrer noopener"
target="_blank"
>
matrix-js-sdk
</a>{' '}
is ©{' '}
</a>
{`, © `}
<a
href="https://matrix.org/foundation"
rel="noreferrer noopener"
target="_blank"
>
The Matrix.org Foundation C.I.C
</a>{' '}
used under the terms of{' '}
</a>
{', is used under the terms of '}
<a
href="http://www.apache.org/licenses/LICENSE-2.0"
rel="noreferrer noopener"
Expand All @@ -362,19 +361,19 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
</li>
<li>
<Text size="T300">
The{' '}
{'The '}
<a
href="https://github.com/mozilla/twemoji-colr"
target="_blank"
rel="noreferrer noopener"
>
twemoji-colr
</a>{' '}
font is ©{' '}
</a>
{` font, © `}
<a href="https://mozilla.org/" target="_blank" rel="noreferrer noopener">
Mozilla Foundation
</a>{' '}
used under the terms of{' '}
</a>
{', is used under the terms of '}
<a
href="http://www.apache.org/licenses/LICENSE-2.0"
target="_blank"
Expand All @@ -387,23 +386,23 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
</li>
<li>
<Text size="T300">
The{' '}
{'The '}
<a
href="https://twemoji.twitter.com"
target="_blank"
rel="noreferrer noopener"
>
Twemoji
</a>{' '}
emoji art is ©{' '}
</a>
{' emoji art, © '}
<a
href="https://twemoji.twitter.com"
target="_blank"
rel="noreferrer noopener"
>
Twitter, Inc and other contributors
</a>{' '}
used under the terms of{' '}
</a>
{', used under the terms of '}
<a
href="https://creativecommons.org/licenses/by/4.0/"
target="_blank"
Expand All @@ -416,19 +415,19 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
</li>
<li>
<Text size="T300">
The{' '}
{'The '}
<a
href="https://material.io/design/sound/sound-resources.html"
target="_blank"
rel="noreferrer noopener"
>
Material sound resources
</a>{' '}
are ©{' '}
{', © '}
<a href="https://google.com" target="_blank" rel="noreferrer noopener">
Google
</a>{' '}
used under the terms of{' '}
</a>
{', used under the terms of '}
<a
href="https://creativecommons.org/licenses/by/4.0/"
target="_blank"
Expand All @@ -439,6 +438,31 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
.
</Text>
</li>
<li>
<Text size="T300">
{'The '}
<a href="https://catppuccin.com/" target="_blank" rel="noreferrer noopener">
Catppuccin Themes
</a>
{', © '}
<a
href="https://github.com/catppuccin"
target="_blank"
rel="noreferrer noopener"
>
Catppuccin
</a>
{', are used under the terms of '}
<a
href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"
target="_blank"
rel="noreferrer noopener"
>
MIT
</a>
.
</Text>
</li>
</Box>
</SequenceCard>
</Box>
Expand Down
9 changes: 8 additions & 1 deletion src/app/features/settings/cosmetics/Themes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { ChangeEventHandler, KeyboardEventHandler } from 'react';
import { type MouseEventHandler, useState } from 'react';
import { Box, Chip, config, Icon, Icons, Input, Switch, Text, toRem } from 'folds';
import { Box, Chip, color, config, Icon, Icons, Input, Switch, Text, toRem } from 'folds';
import { isKeyHotkey } from 'is-hotkey';

import { SettingMenuSelector } from '$components/setting-menu-selector';
Expand Down Expand Up @@ -30,6 +30,13 @@ function makeThemeOptions(themes: Theme[], themeNames: Record<string, string>) {
return themes.map((theme) => ({
value: theme.id,
label: themeNames[theme.id] ?? theme.id,
icon: (
<Icon
size="50"
src={theme.kind === ThemeKind.Dark ? Icons.Star : Icons.Sun}
style={{ color: theme.kind === ThemeKind.Dark ? color.Primary.Main : color.Warning.Main }}
/>
),
}));
}

Expand Down
42 changes: 39 additions & 3 deletions src/app/hooks/useTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ import {
gruvdarkTheme,
accordTheme,
blackTheme,
catppuccinLatteTheme,
catppuccinFrappeTheme,
catppuccinMacchiatoTheme,
catppuccinMochaTheme,
} from '../../colors.css';

export enum ThemeKind {
Expand Down Expand Up @@ -88,20 +92,48 @@ export const BlackTheme: Theme = {
classNames: ['black-theme', blackTheme, onDarkFontWeight],
};

export const CatppuccinLatteTheme: Theme = {
id: 'catppuccin-latte-theme',
kind: ThemeKind.Light,
classNames: ['catppuccin-latte-theme', catppuccinLatteTheme, onLightFontWeight],
};

export const CatppuccinFrappeTheme: Theme = {
id: 'catppuccin-frappe-theme',
kind: ThemeKind.Dark,
classNames: ['catppuccin-frappe-theme', catppuccinFrappeTheme, onDarkFontWeight],
};

export const CatppuccinMacchiatoTheme: Theme = {
id: 'catppuccin-macchiato-theme',
kind: ThemeKind.Dark,
classNames: ['catppuccin-macchiato-theme', catppuccinMacchiatoTheme, onDarkFontWeight],
};

export const CatppuccinMochaTheme: Theme = {
id: 'catppuccin-mocha-theme',
kind: ThemeKind.Dark,
classNames: ['catppuccin-mocha-theme', catppuccinMochaTheme, onDarkFontWeight],
};

export const useThemes = (): Theme[] => {
const themes: Theme[] = useMemo(
() => [
LightTheme,
SilverTheme,
CinnyLightTheme,
CinnySilverTheme,
DarkTheme,
ButterTheme,
RosePineTheme,
CinnyLightTheme,
CinnySilverTheme,
CinnyDarkTheme,
ButterTheme,
GruvdarkTheme,
AccordTheme,
BlackTheme,
CatppuccinLatteTheme,
CatppuccinFrappeTheme,
CatppuccinMacchiatoTheme,
CatppuccinMochaTheme,
],
[]
);
Expand All @@ -123,6 +155,10 @@ export const useThemeNames = (): Record<string, string> =>
[GruvdarkTheme.id]: 'GruvDark',
[AccordTheme.id]: 'Accord',
[BlackTheme.id]: 'Black',
[CatppuccinLatteTheme.id]: 'Catppuccin Latte',
[CatppuccinFrappeTheme.id]: 'Catppuccin Frappe',
[CatppuccinMacchiatoTheme.id]: 'Catppuccin Macchiato',
[CatppuccinMochaTheme.id]: 'Catppuccin Mocha',
}),
[]
);
Expand Down
Loading
Loading