Skip to content
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

added catppuccin latte and frappe #61

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

added catppuccin latte and frappe #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
87 changes: 87 additions & 0 deletions theme/flavors/catppuccin-frappe.theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/**
* @name system24 (catppuccin frappe)
* @description A tui-style discord theme. Based on the catppuccin frappe color palette.
* @author refact0r, ruiiiijiiiiang
* @version 1.0.0
* @invite nz87hXyvcy
* @website https://github.com/refact0r/system24
* @source https://github.com/refact0r/system24/blob/master/flavors/catppuccin-frappe.theme.css
* @authorId 508863359777505290
* @authorLink https://www.refact0r.dev
*/

/* import theme modules */
@import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */
@import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */

/* customize things here */
:root {
--font: 'DM Mono'; /* UI font name. it must be installed on your system. */
letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */
font-weight: 300; /* UI font weight. */
--label-font-weight: 500; /* font weight for panel labels. */
--corner-text: 'catppuccin24'; /* custom text to display in the corner. only works on windows. */
--pad: 16px; /* padding between panels. */
--txt-pad: 10px; /* padding inside panels to prevent labels from clipping */
--panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */

/* background colors */
--bg-0: oklch(32.91% 0.0324 274.76); /* main background color. */ /* Catppuccin Base */
--bg-1: oklch(29.73% 0.0294 276.21); /* background color for secondary elements like code blocks, embeds, etc. */ /* Catppuccin Mantle */
--bg-2: oklch(39.49% 0.0342 275.9); /* color of neutral buttons. */ /* Catppuccin Surface 0 */
--bg-3: oklch(46.01% 0.0367 272.97); /* color of neutral buttons when hovered. */ /* Catppuccin Surface 1 */

/* state modifiers */
--hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* color of hovered elements. */
--active: color-mix(in oklch, var(--txt-3), transparent 60%); /* color of elements when clicked. */
--selected: var(--active); /* color of selected elements. */

/* text colors */
--txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */
--txt-link: var(--cyan); /* color of links. */
--txt-0: oklch(96.19% 0.0526 273.35); /* color of bright/white text. */ /* +10% lightness from Text */
--txt-1: oklch(86.19% 0.0526 273.35); /* main text color. */ /* Catppuccin Text */
--txt-2: oklch(69.7% 0.0464 273.78); /* color of secondary text like channel list. */ /* Catppuccin Overlay 2 */
--txt-3: oklch(52.11% 0.0386 274); /* color of muted text. */ /* Catppuccin Surface 2 */

/* accent colors */
--acc-0: var(--purple); /* main accent color. */
--acc-1: var(--purple-1); /* color of accent buttons when hovered. */
--acc-2: var(--purple-2); /* color of accent buttons when clicked. */

/* borders */
--border-width: 2px; /* panel border thickness. */
--border-color: var(--bg-2); /* panel border color. */
--border-hover-color: var(--acc-0); /* panel border color when hovered. */
--border-transition: 0.2s ease; /* panel border transition. */

/* status dot colors */
--online-dot: var(--green); /* color of online dot. */
--dnd-dot: var(--pink); /* color of do not disturb dot. */
--idle-dot: var(--yellow); /* color of idle dot. */
--streaming-dot: var(--purple); /* color of streaming dot. */

/* mention/ping and message colors */
--mention-txt: var(--acc-0); /* color of mention text. */
--mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */
--mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */
--mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */
--reply-overlay: var(--active); /* overlay color of message you are replying to. */
--reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */

/* color shades */
--pink: oklch(71.71% 0.1244 19.39); /* Catppuccin Red */
--pink-1: oklch(61.71% 0.1244 19.39); /* -10% Lightness from Red */
--pink-2: oklch(51.71% 0.1244 19.39); /* -20% Lightness from Red */
--purple: oklch(76.48% 0.1108 311.74); /* Catppuccin Mauve */
--purple-1: oklch(66.48% 0.1108 311.74); /* -10% Lightness from Mauve */
--purple-2: oklch(56.48% 0.1108 311.74); /* -20% Lightness from Mauve */
--cyan: oklch(77.96% 0.0727 227.88); /* Catppuccin Sapphire */
--yellow: oklch(84.43% 0.0795 83.47); /* Catppuccin Yellow */
--green: oklch(81.24% 0.1071 133.39); /* Catppuccin Green */
--green-1: oklch(71.24% 0.1071 133.39); /* -10% Lightness from Green */
--green-2: oklch(61.24% 0.1071 133.39); /* -20% Lightness from Green */
--lavender: oklch(80.99% 0.0759 283.74); /* Catppuccin Lavender */
--lavender-1: oklch(70.99% 0.0759 283.74); /* -10% Lightness from Lavender */
--lavender-2: oklch(60.99% 0.0759 283.74); /* -20% Lightness from Lavender */
}
87 changes: 87 additions & 0 deletions theme/flavors/catppuccin-latte.theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/**
* @name system24 (catppuccin latte)
* @description A tui-style discord theme. Based on the catppuccin latte color palette.
* @author refact0r, ruiiiijiiiiang
* @version 1.0.0
* @invite nz87hXyvcy
* @website https://github.com/refact0r/system24
* @source https://github.com/refact0r/system24/blob/master/flavors/catppuccin-latte.theme.css
* @authorId 508863359777505290
* @authorLink https://www.refact0r.dev
*/

/* import theme modules */
@import url('https://refact0r.github.io/system24/src/main.css'); /* main theme css. DO NOT REMOVE */
@import url('https://refact0r.github.io/system24/src/unrounding.css'); /* gets rid of all rounded corners. remove if you want rounded corners. */

/* customize things here */
:root {
--font: 'DM Mono'; /* UI font name. it must be installed on your system. */
letter-spacing: -0.05ch; /* decreases letter spacing for better readability. */
font-weight: 300; /* UI font weight. */
--label-font-weight: 500; /* font weight for panel labels. */
--corner-text: 'catppuccin24'; /* custom text to display in the corner. only works on windows. */
--pad: 16px; /* padding between panels. */
--txt-pad: 10px; /* padding inside panels to prevent labels from clipping */
--panel-roundness: 0px; /* corner roundness of panels. ONLY WORKS IF unrounding.css IS REMOVED (see above). */

/* background colors */
--bg-0: oklch(95.78% 0.0058 264.53); /* main background color. */ /* Catppuccin Base */
--bg-1: oklch(93.35% 0.0087 264.52); /* background color for secondary elements like code blocks, embeds, etc. */ /* Catppuccin Mantle */
--bg-2: oklch(85.75% 0.0145 268.48); /* color of neutral buttons. */ /* Catppuccin Surface 0 */
--bg-3: oklch(80.83% 0.0174 271.2); /* color of neutral buttons when hovered. */ /* Catppuccin Surface 1 */

/* state modifiers */
--hover: color-mix(in oklch, var(--txt-3), transparent 80%); /* color of hovered elements. */
--active: color-mix(in oklch, var(--txt-3), transparent 60%); /* color of elements when clicked. */
--selected: var(--active); /* color of selected elements. */

/* text colors */
--txt-dark: var(--bg-0); /* color of dark text on colored backgrounds. */
--txt-link: var(--cyan); /* color of links. */
--txt-0: oklch(53.55% 0.043 279.33); /* color of bright/white text. */ /* +10% lightness from Text */
--txt-1: oklch(43.55% 0.043 279.33); /* main text color. */ /* Catppuccin Text */
--txt-2: oklch(60.09% 0.0305 278.69); /* color of secondary text like channel list. */ /* Catppuccin Overlay 2 */
--txt-3: oklch(75.84% 0.0205 273.15); /* color of muted text. */ /* Catppuccin Surface 2 */

/* accent colors */
--acc-0: var(--purple); /* main accent color. */
--acc-1: var(--purple-1); /* color of accent buttons when hovered. */
--acc-2: var(--purple-2); /* color of accent buttons when clicked. */

/* borders */
--border-width: 2px; /* panel border thickness. */
--border-color: var(--bg-2); /* panel border color. */
--border-hover-color: var(--acc-0); /* panel border color when hovered. */
--border-transition: 0.2s ease; /* panel border transition. */

/* status dot colors */
--online-dot: var(--green); /* color of online dot. */
--dnd-dot: var(--pink); /* color of do not disturb dot. */
--idle-dot: var(--yellow); /* color of idle dot. */
--streaming-dot: var(--purple); /* color of streaming dot. */

/* mention/ping and message colors */
--mention-txt: var(--acc-0); /* color of mention text. */
--mention-bg: color-mix(in oklch, var(--acc-0), transparent 90%); /* background highlight of mention text. */
--mention-overlay: color-mix(in oklch, var(--acc-0), transparent 90%); /* overlay color of messages that mention you. */
--mention-hover-overlay: color-mix(in oklch, var(--acc-0), transparent 95%); /* overlay color of messages that mention you when hovered. */
--reply-overlay: var(--active); /* overlay color of message you are replying to. */
--reply-hover-overlay: var(--hover); /* overlay color of message you are replying to when hovered. */

/* color shades */
--pink: oklch(55.05% 0.2155 19.81); /* Catppuccin Red */
--pink-1: oklch(45.05% 0.2155 19.81); /* -10% Lightness from Red */
--pink-2: oklch(35.05% 0.2155 19.81); /* -20% Lightness from Red */
--purple: oklch(55.47% 0.2503 297.02); /* Catppuccin Mauve */
--purple-1: oklch(45.47% 0.2503 297.02); /* -10% Lightness from Mauve */
--purple-2: oklch(35.47% 0.2503 297.02); /* -20% Lightness from Mauve */
--cyan: oklch(64.77% 0.1068 212.89); /* Catppuccin Sapphire */
--yellow: oklch(71.4% 0.1494 67.78); /* Catppuccin Yellow */
--green: oklch(62.5% 0.1772 140.44); /* Catppuccin Green */
--green-1: oklch(52.5% 0.1772 140.44); /* -10% Lightness from Green */
--green-2: oklch(42.5% 0.1772 140.44); /* -20% Lightness from Green */
--lavender: oklch(66.38% 0.1751 273.13); /* Catppuccin Lavender */
--lavender-1: oklch(56.38% 0.1751 273.13); /* -10% Lightness from Lavender */
--lavender-2: oklch(46.38% 0.1751 273.13); /* -20% Lightness from Lavender */
}