From 9a4b553a72531dab88d143328b56af6b645a5f75 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 28 Apr 2026 09:01:57 +0300 Subject: [PATCH 1/6] add basic catppuccin mocha theme --- src/app/features/settings/about/About.tsx | 31 +++++++- src/app/hooks/useTheme.ts | 9 +++ src/app/styles/themes.css | 89 +++++++++++++++++++++++ src/colors.css.ts | 1 + src/index.css | 16 ++++ 5 files changed, 143 insertions(+), 3 deletions(-) diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx index 44639f719..070e49b29 100644 --- a/src/app/features/settings/about/About.tsx +++ b/src/app/features/settings/about/About.tsx @@ -312,15 +312,15 @@ export function About({ requestBack, requestClose }: Readonly) { > Cinny - is ©{' '} + {` is © `} Ajay Bura - {' '} - used under the terms of{' '} + + {` used under the terms of `} ) { . +
  • + + The{' '} + + Catppuccin Themes + {' '} + are ©{' '} + + Catppuccin + {' '} + used under the terms of{' '} + + MIT + + . + +
    • diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts index 846c103ad..18148da00 100755 --- a/src/app/hooks/useTheme.ts +++ b/src/app/hooks/useTheme.ts @@ -14,6 +14,7 @@ import { gruvdarkTheme, accordTheme, blackTheme, + catppuccinMochaTheme, } from '../../colors.css'; export enum ThemeKind { @@ -88,6 +89,12 @@ export const BlackTheme: Theme = { classNames: ['black-theme', blackTheme, 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( () => [ @@ -102,6 +109,7 @@ export const useThemes = (): Theme[] => { GruvdarkTheme, AccordTheme, BlackTheme, + CatppuccinMochaTheme, ], [] ); @@ -123,6 +131,7 @@ export const useThemeNames = (): Record => [GruvdarkTheme.id]: 'GruvDark', [AccordTheme.id]: 'Accord', [BlackTheme.id]: 'Black', + [CatppuccinMochaTheme.id]: 'Catppuccin Mocha', }), [] ); diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css index 116eb0949..e391e532c 100755 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -976,3 +976,92 @@ --sable-shadow: rgba(0, 0, 0, 0.4); --sable-overlay: rgba(15, 14, 18, 0.85); } + +/* --- Catppuccin Theme --- */ +.catppuccin-mocha-theme { + /* Background */ + --sable-bg-container: #181825; + --sable-bg-container-hover: #1e1e2e; + --sable-bg-container-active: #313244; + --sable-bg-container-line: #45475a; + --sable-bg-on-container: #cdd6f4; + + /* Surface */ + --sable-surface-container: #1e1e2e; + --sable-surface-container-hover: #313244; + --sable-surface-container-active: #45475a; + --sable-surface-container-line: #585b70; + --sable-surface-on-container: #cdd6f4; + + /* Surface Variant */ + --sable-surface-var-container: #181825; + --sable-surface-var-container-hover: #18182580; + --sable-surface-var-container-active: #313244; + --sable-surface-var-container-line: #45475a; + --sable-surface-var-on-container: #cdd6f4; + + /* Primary */ + --sable-primary-main: #cba6f7; + --sable-primary-main-hover: #cba6f7d8; + --sable-primary-main-active: #cba6f7b4; + --sable-primary-main-line: #a79de6; /* ------------------------------- thing */ + --sable-primary-on-main: #1e1e2e; + --sable-primary-container: #cba6f712; + --sable-primary-container-hover: #cba6f71a; + --sable-primary-container-active: #cba6f712; + --sable-primary-container-line: #575086; /* ------------------------------- thing */ + --sable-primary-on-container: #cba6f7; + + /* Secondary */ + --sable-sec-main: #bac2de; + --sable-sec-main-hover: #a6adc8; + --sable-sec-main-active: #9399b2; + --sable-sec-main-line: #cccccc; /* ------------------------------- thing */ + --sable-sec-on-main: #1e1e2e; + --sable-sec-container: #313244; + --sable-sec-container-hover: #45475a; + --sable-sec-container-active: #585b70; + --sable-sec-container-line: #6c7086; + --sable-sec-on-container: #cdd6f4; + + /* Success */ + --sable-success-main: #a6e3a1; + --sable-success-main-hover: #a6e3a1d8; + --sable-success-main-active: #a6e3a1b4; + --sable-success-main-line: #5cd6a3; /* ------------------------------- thing */ + --sable-success-on-main: #181825; + --sable-success-container: #313244; + --sable-success-container-hover: #a6e3a11a; + --sable-success-container-active: #a6e3a1b412; + --sable-success-container-line: #313244; + --sable-success-on-container: #a6e3a1; + + /* Warning */ + --sable-warn-main: #fab387; + --sable-warn-main-hover: #fab387d8; + --sable-warn-main-active: #fab387b4; + --sable-warn-main-line: #daa36c; /* ------------------ thing */ + --sable-warn-on-main: #181825; + --sable-warn-container: #313244; + --sable-warn-container-hover: #fab3871a; + --sable-warn-container-active: #fab38712; + --sable-warn-container-line: #313244; + --sable-warn-on-container: #fab387; + + /* Crtical */ + --sable-crit-main: #f38ba8; + --sable-crit-main-hover: #f38ba8d8; + --sable-crit-main-active: #f38ba8b4; + --sable-crit-main-line: #de7d7d; /* ---------------------- thing */ + --sable-crit-on-main: #181825; + --sable-crit-container: #313244; + --sable-crit-container-hover: #f38ba81a; + --sable-crit-container-active: #f38ba812; + --sable-crit-container-line: #313244; + --sable-crit-on-container: #f38ba8; + + /* Other */ + --sable-focus-ring: rgb(203, 166, 247, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgb(24, 24, 37, 0.8); +} diff --git a/src/colors.css.ts b/src/colors.css.ts index 562dd362a..54860e990 100755 --- a/src/colors.css.ts +++ b/src/colors.css.ts @@ -102,3 +102,4 @@ export const rosePineTheme = createTheme(color, sableThemeMapping); export const cinnyDarkTheme = createTheme(color, sableThemeMapping); export const accordTheme = createTheme(color, sableThemeMapping); export const blackTheme = createTheme(color, sableThemeMapping); +export const catppuccinMochaTheme = createTheme(color, sableThemeMapping); diff --git a/src/index.css b/src/index.css index cde45ce4c..84e191390 100755 --- a/src/index.css +++ b/src/index.css @@ -75,6 +75,22 @@ --font-monospace: 'Space Mono', monospace; } +.catppuccin-mocha-theme { + --tc-link: #76aff6; + + --mx-uc-1: hsl(260, 100%, 75%); + --mx-uc-2: hsl(320, 100%, 75%); + --mx-uc-3: hsl(180, 100%, 65%); + --mx-uc-4: hsl(150, 100%, 70%); + --mx-uc-5: hsl(200, 100%, 75%); + --mx-uc-6: hsl(280, 80%, 70%); + --mx-uc-7: hsl(40, 100%, 75%); + --mx-uc-8: hsl(0, 100%, 75%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} + html { height: 100%; overflow: hidden; From 8cc7f93f6772d3c4f20fb679c05bb3a367e269c7 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 28 Apr 2026 09:14:47 +0300 Subject: [PATCH 2/6] reworked credits text --- src/app/features/settings/about/About.tsx | 59 +++++++++++------------ 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx index 070e49b29..486379ec3 100644 --- a/src/app/features/settings/about/About.tsx +++ b/src/app/features/settings/about/About.tsx @@ -304,7 +304,6 @@ export function About({ requestBack, requestClose }: Readonly) { >
  • - {' '} ) { > Cinny - {` is © `} + {', © '} ) { > Ajay Bura - {` used under the terms of `} + {', is used under the terms of '} ) {
  • - The{' '} + {'The '} matrix-js-sdk - {' '} - is ©{' '} + + {`, © `} The Matrix.org Foundation C.I.C - {' '} - used under the terms of{' '} + + {', is used under the terms of '} ) {
  • - The{' '} + {'The '} twemoji-colr - {' '} - font is ©{' '} + + {` font, © `} Mozilla Foundation - {' '} - used under the terms of{' '} + + {', is used under the terms of '} ) {
  • - The{' '} + {'The '} Twemoji - {' '} - emoji art is ©{' '} + + {' emoji art, © '} Twitter, Inc and other contributors - {' '} - used under the terms of{' '} + + {', used under the terms of '} ) {
  • - The{' '} + {'The '} ) { > Material sound resources {' '} - are ©{' '} + {', © '} Google - {' '} - used under the terms of{' '} + + {', used under the terms of '} ) {
  • - The{' '} + {'The '} + + Catppuccin Themes + + {', © '} - Catppuccin Themes - {' '} - are ©{' '} - Catppuccin - {' '} - used under the terms of{' '} + + {', are used under the terms of '} Date: Tue, 28 Apr 2026 20:24:23 +0300 Subject: [PATCH 3/6] added the other 3 sub-themes --- src/app/hooks/useTheme.ts | 27 ++++ src/app/styles/themes.css | 281 +++++++++++++++++++++++++++++++++++++- src/colors.css.ts | 3 + src/index.css | 2 + 4 files changed, 306 insertions(+), 7 deletions(-) diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts index 18148da00..0eeef6fc1 100755 --- a/src/app/hooks/useTheme.ts +++ b/src/app/hooks/useTheme.ts @@ -14,6 +14,9 @@ import { gruvdarkTheme, accordTheme, blackTheme, + catppuccinLatteTheme, + catppuccinFrappeTheme, + catppuccinMacchiatoTheme, catppuccinMochaTheme, } from '../../colors.css'; @@ -89,6 +92,24 @@ 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, @@ -109,6 +130,9 @@ export const useThemes = (): Theme[] => { GruvdarkTheme, AccordTheme, BlackTheme, + CatppuccinLatteTheme, + CatppuccinFrappeTheme, + CatppuccinMacchiatoTheme, CatppuccinMochaTheme, ], [] @@ -131,6 +155,9 @@ export const useThemeNames = (): Record => [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', }), [] diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css index e391e532c..3f1b64685 100755 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -977,7 +977,274 @@ --sable-overlay: rgba(15, 14, 18, 0.85); } -/* --- Catppuccin Theme --- */ +/* --- Catppuccin Theme - Latte --- */ +.catppuccin-latte-theme { + /* Background */ + --sable-bg-container: #e6e9ef; + --sable-bg-container-hover: #eff1f5; + --sable-bg-container-active: #ccd0da; + --sable-bg-container-line: #bcc0cc; + --sable-bg-on-container: #4c4f69; + + /* Surface */ + --sable-surface-container: #eff1f5; + --sable-surface-container-hover: #ccd0da; + --sable-surface-container-active: #bcc0cc; + --sable-surface-container-line: #acb0be; + --sable-surface-on-container: #4c4f69; + + /* Surface Variant */ + --sable-surface-var-container: #e6e9ef; + --sable-surface-var-container-hover: #e6e9ef80; + --sable-surface-var-container-active: #ccd0da; + --sable-surface-var-container-line: #bcc0cc; + --sable-surface-var-on-container: #4c4f69; + + /* Primary */ + --sable-primary-main: #8839ef; + --sable-primary-main-hover: #8839efd8; + --sable-primary-main-active: #8839efb4; + --sable-primary-main-line: #00000000; + --sable-primary-on-main: #eff1f5; + --sable-primary-container: #cba6f712; + --sable-primary-container-hover: #cba6f71a; + --sable-primary-container-active: #cba6f712; + --sable-primary-container-line: #00000000; + --sable-primary-on-container: #8839ef; + + /* Secondary */ + --sable-sec-main: #b5bfe2; + --sable-sec-main-hover: #6c6f85; + --sable-sec-main-active: #7c7f93; + --sable-sec-main-line: #00000000; + --sable-sec-on-main: #eff1f5; + --sable-sec-container: #ccd0da; + --sable-sec-container-hover: #bcc0cc; + --sable-sec-container-active: #acb0be; + --sable-sec-container-line: #9ca0b0; + --sable-sec-on-container: #4c4f69; + + /* Success */ + --sable-success-main: #40a02b; + --sable-success-main-hover: #40a02bd8; + --sable-success-main-active: #40a02bb4; + --sable-success-main-line: #00000000; + --sable-success-on-main: #e6e9ef; + --sable-success-container: #ccd0da; + --sable-success-container-hover: #40a02b1a; + --sable-success-container-active: #a6d189b12; + --sable-success-container-line: #ccd0da; + --sable-success-on-container: #40a02b; + + /* Warning */ + --sable-warn-main: #fe640b; + --sable-warn-main-hover: #fe640bd8; + --sable-warn-main-active: #fe640bb4; + --sable-warn-main-line: #00000000; + --sable-warn-on-main: #e6e9ef; + --sable-warn-container: #ccd0da; + --sable-warn-container-hover: #fe640b1a; + --sable-warn-container-active: #fe640b12; + --sable-warn-container-line: #ccd0da; + --sable-warn-on-container: #fe640b; + + /* Crtical */ + --sable-crit-main: #d20f39; + --sable-crit-main-hover: #d20f39d8; + --sable-crit-main-active: #d20f39b4; + --sable-crit-main-line: #00000000; + --sable-crit-on-main: #e6e9ef; + --sable-crit-container: #ccd0da; + --sable-crit-container-hover: #d20f391a; + --sable-crit-container-active: #d20f3912; + --sable-crit-container-line: #ccd0da; + --sable-crit-on-container: #d20f39; + + /* Other */ + --sable-focus-ring: rgba(110, 86, 207, 0.4); + --sable-shadow: rgba(45, 35, 92, 0.1); + --sable-overlay: rgba(45, 35, 92, 0.4); +} + +/* --- Catppuccin Theme - Frappe --- */ +.catppuccin-frappe-theme { + /* Background */ + --sable-bg-container: #292c3c; + --sable-bg-container-hover: #303446; + --sable-bg-container-active: #414559; + --sable-bg-container-line: #51576d; + --sable-bg-on-container: #c6d0f5; + + /* Surface */ + --sable-surface-container: #303446; + --sable-surface-container-hover: #414559; + --sable-surface-container-active: #51576d; + --sable-surface-container-line: #626880; + --sable-surface-on-container: #c6d0f5; + + /* Surface Variant */ + --sable-surface-var-container: #292c3c; + --sable-surface-var-container-hover: #292c3c80; + --sable-surface-var-container-active: #414559; + --sable-surface-var-container-line: #51576d; + --sable-surface-var-on-container: #c6d0f5; + + /* Primary */ + --sable-primary-main: #ca9ee6; + --sable-primary-main-hover: #ca9ee6d8; + --sable-primary-main-active: #ca9ee6b4; + --sable-primary-main-line: #00000000; + --sable-primary-on-main: #303446; + --sable-primary-container: #cba6f712; + --sable-primary-container-hover: #cba6f71a; + --sable-primary-container-active: #cba6f712; + --sable-primary-container-line: #00000000; + --sable-primary-on-container: #ca9ee6; + + /* Secondary */ + --sable-sec-main: #5c5f77; + --sable-sec-main-hover: #a5adce; + --sable-sec-main-active: #949cbb; + --sable-sec-main-line: #00000000; + --sable-sec-on-main: #303446; + --sable-sec-container: #414559; + --sable-sec-container-hover: #51576d; + --sable-sec-container-active: #626880; + --sable-sec-container-line: #737994; + --sable-sec-on-container: #c6d0f5; + + /* Success */ + --sable-success-main: #a6d189; + --sable-success-main-hover: #a6d189d8; + --sable-success-main-active: #a6d189b4; + --sable-success-main-line: #00000000; + --sable-success-on-main: #292c3c; + --sable-success-container: #414559; + --sable-success-container-hover: #a6d1891a; + --sable-success-container-active: #a6d189b12; + --sable-success-container-line: #414559; + --sable-success-on-container: #a6d189; + + /* Warning */ + --sable-warn-main: #ef9f76; + --sable-warn-main-hover: #ef9f76d8; + --sable-warn-main-active: #ef9f76b4; + --sable-warn-main-line: #00000000; + --sable-warn-on-main: #292c3c; + --sable-warn-container: #414559; + --sable-warn-container-hover: #ef9f761a; + --sable-warn-container-active: #ef9f7612; + --sable-warn-container-line: #414559; + --sable-warn-on-container: #ef9f76; + + /* Crtical */ + --sable-crit-main: #e78284; + --sable-crit-main-hover: #e78284d8; + --sable-crit-main-active: #e78284b4; + --sable-crit-main-line: #00000000; + --sable-crit-on-main: #292c3c; + --sable-crit-container: #414559; + --sable-crit-container-hover: #e782841a; + --sable-crit-container-active: #e7828412; + --sable-crit-container-line: #414559; + --sable-crit-on-container: #e78284; + + /* Other */ + --sable-focus-ring: rgb(203, 166, 247, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgb(24, 24, 37, 0.8); +} + +/* --- Catppuccin Theme - Macchiato --- */ +.catppuccin-macchiato-theme { + /* Background */ + --sable-bg-container: #1e2030; + --sable-bg-container-hover: #24273a; + --sable-bg-container-active: #363a4f; + --sable-bg-container-line: #494d64; + --sable-bg-on-container: #cad3f5; + + /* Surface */ + --sable-surface-container: #24273a; + --sable-surface-container-hover: #363a4f; + --sable-surface-container-active: #494d64; + --sable-surface-container-line: #5b6078; + --sable-surface-on-container: #cad3f5; + + /* Surface Variant */ + --sable-surface-var-container: #1e2030; + --sable-surface-var-container-hover: #1e203080; + --sable-surface-var-container-active: #363a4f; + --sable-surface-var-container-line: #494d64; + --sable-surface-var-on-container: #cad3f5; + + /* Primary */ + --sable-primary-main: #c6a0f6; + --sable-primary-main-hover: #c6a0f6d8; + --sable-primary-main-active: #c6a0f6b4; + --sable-primary-main-line: #00000000; + --sable-primary-on-main: #24273a; + --sable-primary-container: #cba6f712; + --sable-primary-container-hover: #cba6f71a; + --sable-primary-container-active: #cba6f712; + --sable-primary-container-line: #00000000; + --sable-primary-on-container: #c6a0f6; + + /* Secondary */ + --sable-sec-main: #b8c0e0; + --sable-sec-main-hover: #a5adcb; + --sable-sec-main-active: #939ab7; + --sable-sec-main-line: #00000000; + --sable-sec-on-main: #24273a; + --sable-sec-container: #363a4f; + --sable-sec-container-hover: #494d64; + --sable-sec-container-active: #5b6078; + --sable-sec-container-line: #6e738d; + --sable-sec-on-container: #cad3f5; + + /* Success */ + --sable-success-main: #a6da95; + --sable-success-main-hover: #a6da95d8; + --sable-success-main-active: #a6da95b4; + --sable-success-main-line: #00000000; + --sable-success-on-main: #24273a; + --sable-success-container: #313244; + --sable-success-container-hover: #a6da951a; + --sable-success-container-active: #a6da95b412; + --sable-success-container-line: #313244; + --sable-success-on-container: #a6da95; + + /* Warning */ + --sable-warn-main: #f5a97f; + --sable-warn-main-hover: #f5a97fd8; + --sable-warn-main-active: #f5a97fb4; + --sable-warn-main-line: #00000000; + --sable-warn-on-main: #24273a; + --sable-warn-container: #313244; + --sable-warn-container-hover: #f5a97f1a; + --sable-warn-container-active: #f5a97f12; + --sable-warn-container-line: #313244; + --sable-warn-on-container: #f5a97f; + + /* Crtical */ + --sable-crit-main: #ed8796; + --sable-crit-main-hover: #ed8796d8; + --sable-crit-main-active: #ed8796b4; + --sable-crit-main-line: #00000000; + --sable-crit-on-main: #24273a; + --sable-crit-container: #313244; + --sable-crit-container-hover: #ed87961a; + --sable-crit-container-active: #ed879612; + --sable-crit-container-line: #313244; + --sable-crit-on-container: #ed8796; + + /* Other */ + --sable-focus-ring: rgb(203, 166, 247, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgb(24, 24, 37, 0.8); +} + +/* --- Catppuccin Theme - Mocha --- */ .catppuccin-mocha-theme { /* Background */ --sable-bg-container: #181825; @@ -1004,19 +1271,19 @@ --sable-primary-main: #cba6f7; --sable-primary-main-hover: #cba6f7d8; --sable-primary-main-active: #cba6f7b4; - --sable-primary-main-line: #a79de6; /* ------------------------------- thing */ + --sable-primary-main-line: #00000000; --sable-primary-on-main: #1e1e2e; --sable-primary-container: #cba6f712; --sable-primary-container-hover: #cba6f71a; --sable-primary-container-active: #cba6f712; - --sable-primary-container-line: #575086; /* ------------------------------- thing */ + --sable-primary-container-line: #00000000; --sable-primary-on-container: #cba6f7; /* Secondary */ --sable-sec-main: #bac2de; --sable-sec-main-hover: #a6adc8; --sable-sec-main-active: #9399b2; - --sable-sec-main-line: #cccccc; /* ------------------------------- thing */ + --sable-sec-main-line: #00000000; --sable-sec-on-main: #1e1e2e; --sable-sec-container: #313244; --sable-sec-container-hover: #45475a; @@ -1028,7 +1295,7 @@ --sable-success-main: #a6e3a1; --sable-success-main-hover: #a6e3a1d8; --sable-success-main-active: #a6e3a1b4; - --sable-success-main-line: #5cd6a3; /* ------------------------------- thing */ + --sable-success-main-line: #00000000; --sable-success-on-main: #181825; --sable-success-container: #313244; --sable-success-container-hover: #a6e3a11a; @@ -1040,7 +1307,7 @@ --sable-warn-main: #fab387; --sable-warn-main-hover: #fab387d8; --sable-warn-main-active: #fab387b4; - --sable-warn-main-line: #daa36c; /* ------------------ thing */ + --sable-warn-main-line: #00000000; --sable-warn-on-main: #181825; --sable-warn-container: #313244; --sable-warn-container-hover: #fab3871a; @@ -1052,7 +1319,7 @@ --sable-crit-main: #f38ba8; --sable-crit-main-hover: #f38ba8d8; --sable-crit-main-active: #f38ba8b4; - --sable-crit-main-line: #de7d7d; /* ---------------------- thing */ + --sable-crit-main-line: #00000000; --sable-crit-on-main: #181825; --sable-crit-container: #313244; --sable-crit-container-hover: #f38ba81a; diff --git a/src/colors.css.ts b/src/colors.css.ts index 54860e990..82272031a 100755 --- a/src/colors.css.ts +++ b/src/colors.css.ts @@ -102,4 +102,7 @@ export const rosePineTheme = createTheme(color, sableThemeMapping); export const cinnyDarkTheme = createTheme(color, sableThemeMapping); export const accordTheme = createTheme(color, sableThemeMapping); export const blackTheme = createTheme(color, sableThemeMapping); +export const catppuccinLatteTheme = createTheme(color, sableThemeMapping); +export const catppuccinFrappeTheme = createTheme(color, sableThemeMapping); +export const catppuccinMacchiatoTheme = createTheme(color, sableThemeMapping); export const catppuccinMochaTheme = createTheme(color, sableThemeMapping); diff --git a/src/index.css b/src/index.css index 84e191390..82b294f60 100755 --- a/src/index.css +++ b/src/index.css @@ -75,6 +75,8 @@ --font-monospace: 'Space Mono', monospace; } +.catppuccin-frappe-theme, +.catppuccin-macchiato-theme, .catppuccin-mocha-theme { --tc-link: #76aff6; From 0542908ef20365fc6a057e93f9bc92f3aa04aacc Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 28 Apr 2026 22:10:40 +0300 Subject: [PATCH 4/6] ADD - Catppuccin themes --- src/app/styles/themes.css | 43 ++++++++++++++++++++------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css index 3f1b64685..6b935026d 100755 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -889,6 +889,7 @@ --sable-overlay: rgba(0, 0, 0, 0.8); } +/* --- Black Theme --- */ .black-theme { /* Background */ --sable-bg-container: #000000; @@ -977,7 +978,7 @@ --sable-overlay: rgba(15, 14, 18, 0.85); } -/* --- Catppuccin Theme - Latte --- */ +/* --- Catppuccin Latte --- */ .catppuccin-latte-theme { /* Background */ --sable-bg-container: #e6e9ef; @@ -1013,7 +1014,7 @@ --sable-primary-on-container: #8839ef; /* Secondary */ - --sable-sec-main: #b5bfe2; + --sable-sec-main: #5c5f77; --sable-sec-main-hover: #6c6f85; --sable-sec-main-active: #7c7f93; --sable-sec-main-line: #00000000; @@ -1032,7 +1033,7 @@ --sable-success-on-main: #e6e9ef; --sable-success-container: #ccd0da; --sable-success-container-hover: #40a02b1a; - --sable-success-container-active: #a6d189b12; + --sable-success-container-active: #40a02b12; --sable-success-container-line: #ccd0da; --sable-success-on-container: #40a02b; @@ -1061,12 +1062,12 @@ --sable-crit-on-container: #d20f39; /* Other */ - --sable-focus-ring: rgba(110, 86, 207, 0.4); - --sable-shadow: rgba(45, 35, 92, 0.1); - --sable-overlay: rgba(45, 35, 92, 0.4); + --sable-focus-ring: rgba(136, 57, 239, 0.5); + --sable-shadow: rgba(0, 0, 0, 0.4); + --sable-overlay: rgba(220, 224, 232, 0.8); } -/* --- Catppuccin Theme - Frappe --- */ +/* --- Catppuccin Frappe --- */ .catppuccin-frappe-theme { /* Background */ --sable-bg-container: #292c3c; @@ -1095,14 +1096,14 @@ --sable-primary-main-active: #ca9ee6b4; --sable-primary-main-line: #00000000; --sable-primary-on-main: #303446; - --sable-primary-container: #cba6f712; - --sable-primary-container-hover: #cba6f71a; - --sable-primary-container-active: #cba6f712; + --sable-primary-container: #ca9ee612; + --sable-primary-container-hover: #ca9ee61a; + --sable-primary-container-active: #ca9ee612; --sable-primary-container-line: #00000000; --sable-primary-on-container: #ca9ee6; /* Secondary */ - --sable-sec-main: #5c5f77; + --sable-sec-main: #b5bfe2; --sable-sec-main-hover: #a5adce; --sable-sec-main-active: #949cbb; --sable-sec-main-line: #00000000; @@ -1150,12 +1151,12 @@ --sable-crit-on-container: #e78284; /* Other */ - --sable-focus-ring: rgb(203, 166, 247, 0.5); + --sable-focus-ring: rgb(202, 158, 230, 0.5); --sable-shadow: rgba(0, 0, 0, 0.4); - --sable-overlay: rgb(24, 24, 37, 0.8); + --sable-overlay: rgba(41, 44, 60, 0.8); } -/* --- Catppuccin Theme - Macchiato --- */ +/* --- Catppuccin Macchiato --- */ .catppuccin-macchiato-theme { /* Background */ --sable-bg-container: #1e2030; @@ -1184,9 +1185,9 @@ --sable-primary-main-active: #c6a0f6b4; --sable-primary-main-line: #00000000; --sable-primary-on-main: #24273a; - --sable-primary-container: #cba6f712; - --sable-primary-container-hover: #cba6f71a; - --sable-primary-container-active: #cba6f712; + --sable-primary-container: #c6a0f612; + --sable-primary-container-hover: #c6a0f61a; + --sable-primary-container-active: #c6a0f612; --sable-primary-container-line: #00000000; --sable-primary-on-container: #c6a0f6; @@ -1210,7 +1211,7 @@ --sable-success-on-main: #24273a; --sable-success-container: #313244; --sable-success-container-hover: #a6da951a; - --sable-success-container-active: #a6da95b412; + --sable-success-container-active: #a6da9512; --sable-success-container-line: #313244; --sable-success-on-container: #a6da95; @@ -1239,12 +1240,12 @@ --sable-crit-on-container: #ed8796; /* Other */ - --sable-focus-ring: rgb(203, 166, 247, 0.5); + --sable-focus-ring: rgba(198, 160, 246, 0.5); --sable-shadow: rgba(0, 0, 0, 0.4); - --sable-overlay: rgb(24, 24, 37, 0.8); + --sable-overlay: rgba(30, 32, 48, 0.8); } -/* --- Catppuccin Theme - Mocha --- */ +/* --- Catppuccin Mocha --- */ .catppuccin-mocha-theme { /* Background */ --sable-bg-container: #181825; From cf66dd19c6da744037cacdcc0924a9aa7dcf2863 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 28 Apr 2026 23:21:53 +0300 Subject: [PATCH 5/6] restylized the list in the settings --- .../features/settings/cosmetics/Themes.tsx | 9 ++- src/app/hooks/useTheme.ts | 6 +- src/app/styles/themes.css | 48 ++++++------- src/index.css | 70 +++++++++++++++---- 4 files changed, 93 insertions(+), 40 deletions(-) diff --git a/src/app/features/settings/cosmetics/Themes.tsx b/src/app/features/settings/cosmetics/Themes.tsx index edc860478..efa9e22cf 100644 --- a/src/app/features/settings/cosmetics/Themes.tsx +++ b/src/app/features/settings/cosmetics/Themes.tsx @@ -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'; @@ -30,6 +30,13 @@ function makeThemeOptions(themes: Theme[], themeNames: Record) { return themes.map((theme) => ({ value: theme.id, label: themeNames[theme.id] ?? theme.id, + icon: ( + + ), })); } diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts index 0eeef6fc1..d29870294 100755 --- a/src/app/hooks/useTheme.ts +++ b/src/app/hooks/useTheme.ts @@ -121,12 +121,12 @@ export const useThemes = (): Theme[] => { () => [ LightTheme, SilverTheme, - CinnyLightTheme, - CinnySilverTheme, DarkTheme, - ButterTheme, RosePineTheme, + CinnyLightTheme, + CinnySilverTheme, CinnyDarkTheme, + ButterTheme, GruvdarkTheme, AccordTheme, BlackTheme, diff --git a/src/app/styles/themes.css b/src/app/styles/themes.css index 6b935026d..c77b13f59 100755 --- a/src/app/styles/themes.css +++ b/src/app/styles/themes.css @@ -1005,19 +1005,19 @@ --sable-primary-main: #8839ef; --sable-primary-main-hover: #8839efd8; --sable-primary-main-active: #8839efb4; - --sable-primary-main-line: #00000000; + --sable-primary-main-line: #8839efa0; --sable-primary-on-main: #eff1f5; --sable-primary-container: #cba6f712; --sable-primary-container-hover: #cba6f71a; --sable-primary-container-active: #cba6f712; - --sable-primary-container-line: #00000000; + --sable-primary-container-line: #cba6f708; --sable-primary-on-container: #8839ef; /* Secondary */ --sable-sec-main: #5c5f77; --sable-sec-main-hover: #6c6f85; --sable-sec-main-active: #7c7f93; - --sable-sec-main-line: #00000000; + --sable-sec-main-line: #8c8fa1; --sable-sec-on-main: #eff1f5; --sable-sec-container: #ccd0da; --sable-sec-container-hover: #bcc0cc; @@ -1029,7 +1029,7 @@ --sable-success-main: #40a02b; --sable-success-main-hover: #40a02bd8; --sable-success-main-active: #40a02bb4; - --sable-success-main-line: #00000000; + --sable-success-main-line: #40a02ba0; --sable-success-on-main: #e6e9ef; --sable-success-container: #ccd0da; --sable-success-container-hover: #40a02b1a; @@ -1041,7 +1041,7 @@ --sable-warn-main: #fe640b; --sable-warn-main-hover: #fe640bd8; --sable-warn-main-active: #fe640bb4; - --sable-warn-main-line: #00000000; + --sable-warn-main-line: #fe640ba0; --sable-warn-on-main: #e6e9ef; --sable-warn-container: #ccd0da; --sable-warn-container-hover: #fe640b1a; @@ -1053,7 +1053,7 @@ --sable-crit-main: #d20f39; --sable-crit-main-hover: #d20f39d8; --sable-crit-main-active: #d20f39b4; - --sable-crit-main-line: #00000000; + --sable-crit-main-line: #d20f39a0; --sable-crit-on-main: #e6e9ef; --sable-crit-container: #ccd0da; --sable-crit-container-hover: #d20f391a; @@ -1094,19 +1094,19 @@ --sable-primary-main: #ca9ee6; --sable-primary-main-hover: #ca9ee6d8; --sable-primary-main-active: #ca9ee6b4; - --sable-primary-main-line: #00000000; + --sable-primary-main-line: #ca9ee6a0; --sable-primary-on-main: #303446; --sable-primary-container: #ca9ee612; --sable-primary-container-hover: #ca9ee61a; --sable-primary-container-active: #ca9ee612; - --sable-primary-container-line: #00000000; + --sable-primary-container-line: #ca9ee608; --sable-primary-on-container: #ca9ee6; /* Secondary */ --sable-sec-main: #b5bfe2; --sable-sec-main-hover: #a5adce; --sable-sec-main-active: #949cbb; - --sable-sec-main-line: #00000000; + --sable-sec-main-line: #838ba7; --sable-sec-on-main: #303446; --sable-sec-container: #414559; --sable-sec-container-hover: #51576d; @@ -1118,7 +1118,7 @@ --sable-success-main: #a6d189; --sable-success-main-hover: #a6d189d8; --sable-success-main-active: #a6d189b4; - --sable-success-main-line: #00000000; + --sable-success-main-line: #a6d189a0; --sable-success-on-main: #292c3c; --sable-success-container: #414559; --sable-success-container-hover: #a6d1891a; @@ -1130,7 +1130,7 @@ --sable-warn-main: #ef9f76; --sable-warn-main-hover: #ef9f76d8; --sable-warn-main-active: #ef9f76b4; - --sable-warn-main-line: #00000000; + --sable-warn-main-line: #ef9f76a0; --sable-warn-on-main: #292c3c; --sable-warn-container: #414559; --sable-warn-container-hover: #ef9f761a; @@ -1142,7 +1142,7 @@ --sable-crit-main: #e78284; --sable-crit-main-hover: #e78284d8; --sable-crit-main-active: #e78284b4; - --sable-crit-main-line: #00000000; + --sable-crit-main-line: #e78284a0; --sable-crit-on-main: #292c3c; --sable-crit-container: #414559; --sable-crit-container-hover: #e782841a; @@ -1183,19 +1183,19 @@ --sable-primary-main: #c6a0f6; --sable-primary-main-hover: #c6a0f6d8; --sable-primary-main-active: #c6a0f6b4; - --sable-primary-main-line: #00000000; + --sable-primary-main-line: #c6a0f6a0; --sable-primary-on-main: #24273a; --sable-primary-container: #c6a0f612; --sable-primary-container-hover: #c6a0f61a; --sable-primary-container-active: #c6a0f612; - --sable-primary-container-line: #00000000; + --sable-primary-container-line: #c6a0f608; --sable-primary-on-container: #c6a0f6; /* Secondary */ --sable-sec-main: #b8c0e0; --sable-sec-main-hover: #a5adcb; --sable-sec-main-active: #939ab7; - --sable-sec-main-line: #00000000; + --sable-sec-main-line: #8087a2; --sable-sec-on-main: #24273a; --sable-sec-container: #363a4f; --sable-sec-container-hover: #494d64; @@ -1207,7 +1207,7 @@ --sable-success-main: #a6da95; --sable-success-main-hover: #a6da95d8; --sable-success-main-active: #a6da95b4; - --sable-success-main-line: #00000000; + --sable-success-main-line: #a6da95a0; --sable-success-on-main: #24273a; --sable-success-container: #313244; --sable-success-container-hover: #a6da951a; @@ -1219,7 +1219,7 @@ --sable-warn-main: #f5a97f; --sable-warn-main-hover: #f5a97fd8; --sable-warn-main-active: #f5a97fb4; - --sable-warn-main-line: #00000000; + --sable-warn-main-line: #f5a97fa0; --sable-warn-on-main: #24273a; --sable-warn-container: #313244; --sable-warn-container-hover: #f5a97f1a; @@ -1231,7 +1231,7 @@ --sable-crit-main: #ed8796; --sable-crit-main-hover: #ed8796d8; --sable-crit-main-active: #ed8796b4; - --sable-crit-main-line: #00000000; + --sable-crit-main-line: #ed8796a0; --sable-crit-on-main: #24273a; --sable-crit-container: #313244; --sable-crit-container-hover: #ed87961a; @@ -1272,19 +1272,19 @@ --sable-primary-main: #cba6f7; --sable-primary-main-hover: #cba6f7d8; --sable-primary-main-active: #cba6f7b4; - --sable-primary-main-line: #00000000; + --sable-primary-main-line: #cba6f7a0; --sable-primary-on-main: #1e1e2e; --sable-primary-container: #cba6f712; --sable-primary-container-hover: #cba6f71a; --sable-primary-container-active: #cba6f712; - --sable-primary-container-line: #00000000; + --sable-primary-container-line: #cba6f708; --sable-primary-on-container: #cba6f7; /* Secondary */ --sable-sec-main: #bac2de; --sable-sec-main-hover: #a6adc8; --sable-sec-main-active: #9399b2; - --sable-sec-main-line: #00000000; + --sable-sec-main-line: #7f849c; --sable-sec-on-main: #1e1e2e; --sable-sec-container: #313244; --sable-sec-container-hover: #45475a; @@ -1296,7 +1296,7 @@ --sable-success-main: #a6e3a1; --sable-success-main-hover: #a6e3a1d8; --sable-success-main-active: #a6e3a1b4; - --sable-success-main-line: #00000000; + --sable-success-main-line: #a6e3a1a0; --sable-success-on-main: #181825; --sable-success-container: #313244; --sable-success-container-hover: #a6e3a11a; @@ -1308,7 +1308,7 @@ --sable-warn-main: #fab387; --sable-warn-main-hover: #fab387d8; --sable-warn-main-active: #fab387b4; - --sable-warn-main-line: #00000000; + --sable-warn-main-line: #fab387a0; --sable-warn-on-main: #181825; --sable-warn-container: #313244; --sable-warn-container-hover: #fab3871a; @@ -1320,7 +1320,7 @@ --sable-crit-main: #f38ba8; --sable-crit-main-hover: #f38ba8d8; --sable-crit-main-active: #f38ba8b4; - --sable-crit-main-line: #00000000; + --sable-crit-main-line: #f38ba8a0; --sable-crit-on-main: #181825; --sable-crit-container: #313244; --sable-crit-container-hover: #f38ba81a; diff --git a/src/index.css b/src/index.css index 82b294f60..0272cb9ef 100755 --- a/src/index.css +++ b/src/index.css @@ -75,19 +75,65 @@ --font-monospace: 'Space Mono', monospace; } -.catppuccin-frappe-theme, -.catppuccin-macchiato-theme, -.catppuccin-mocha-theme { - --tc-link: #76aff6; +.catppuccin-latte-theme { + --tc-link: #7287fd; - --mx-uc-1: hsl(260, 100%, 75%); - --mx-uc-2: hsl(320, 100%, 75%); - --mx-uc-3: hsl(180, 100%, 65%); - --mx-uc-4: hsl(150, 100%, 70%); - --mx-uc-5: hsl(200, 100%, 75%); - --mx-uc-6: hsl(280, 80%, 70%); - --mx-uc-7: hsl(40, 100%, 75%); - --mx-uc-8: hsl(0, 100%, 75%); + /* user mxid colors */ + --mx-uc-1: hsl(197deg, 97%, 46%); + --mx-uc-2: hsl(266deg, 85%, 58%); + --mx-uc-3: hsl(109deg, 58%, 40%); + --mx-uc-4: hsl(347deg, 87%, 44%); + --mx-uc-5: hsl(22deg, 99%, 52%); + --mx-uc-6: hsl(183deg, 74%, 35%); + --mx-uc-7: hsl(220deg, 91%, 54%); + --mx-uc-8: hsl(189deg, 70%, 42%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} + +.catppuccin-frappe-theme { + --tc-link: #babbf1; + + --mx-uc-1: hsl(316deg, 73%, 84%); + --mx-uc-2: hsl(358deg, 66%, 76%); + --mx-uc-3: hsl(172deg, 39%, 65%); + --mx-uc-4: hsl(96deg, 44%, 68%); + --mx-uc-5: hsl(222deg, 74%, 74%); + --mx-uc-6: hsl(277deg, 59%, 76%); + --mx-uc-7: hsl(40deg, 62%, 73%); + --mx-uc-8: hsl(359deg, 68%, 71%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} +.catppuccin-macchiato-theme { + --tc-link: #b7bdf8; + + --mx-uc-1: hsl(316deg, 74%, 85%); + --mx-uc-2: hsl(355deg, 71%, 77%); + --mx-uc-3: hsl(171deg, 47%, 69%); + --mx-uc-4: hsl(105deg, 48%, 72%); + --mx-uc-5: hsl(220deg, 83%, 75%); + --mx-uc-6: hsl(267deg, 83%, 80%); + --mx-uc-7: hsl(40deg, 70%, 78%); + --mx-uc-8: hsl(351deg, 74%, 73%); + + --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; + --font-monospace: 'Space Mono', monospace; +} + +.catppuccin-mocha-theme { + --tc-link: #b4befe; + + --mx-uc-1: hsl(316deg, 72%, 86%); + --mx-uc-2: hsl(350deg, 65%, 77%); + --mx-uc-3: hsl(170deg, 57%, 73%); + --mx-uc-4: hsl(115deg, 54%, 76%); + --mx-uc-5: hsl(217deg, 92%, 76%); + --mx-uc-6: hsl(267deg, 84%, 81%); + --mx-uc-7: hsl(41deg, 86%, 83%); + --mx-uc-8: hsl(343deg, 81%, 75%); --font-secondary: 'Nunito Variable', var(--font-emoji), sans-serif; --font-monospace: 'Space Mono', monospace; From 2e994b382e8836a635378009ee382530eb03a0e7 Mon Sep 17 00:00:00 2001 From: Shea Duma Date: Tue, 28 Apr 2026 23:29:09 +0300 Subject: [PATCH 6/6] added changeset --- .changeset/add_catppuccin_theme.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/add_catppuccin_theme.md diff --git a/.changeset/add_catppuccin_theme.md b/.changeset/add_catppuccin_theme.md new file mode 100644 index 000000000..2c146ebb5 --- /dev/null +++ b/.changeset/add_catppuccin_theme.md @@ -0,0 +1,5 @@ +--- +default: minor +--- + +Add Catppuccin themeset and reorganize list