padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change color theme to catppuccin

Browse source
This commit is contained in:
padreug 2025-02-02 19:16:52 +01:00
parent b0eb8aa744
commit 17cb13db21
1 changed files with 108 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

166
src/assets/index.css
View file

@ -1,67 +1,115 @@
@import "tailwindcss";
@layer base {
:root {
--color-background: hsl(32 92% 87%); /* bg0 */
--color-foreground: hsl(40 13% 23%); /* fg */
/* :root { */
/* /* gruvbox light theme */ */
/* --color-background: hsl(32 92% 87%); /* bg0 */ */
/* --color-foreground: hsl(40 13% 23%); /* fg */ */
/**/
/* --color-card: hsl(39 59% 88%); /* bg1 */ */
/* --color-card-foreground: hsl(40 13% 23%); /* fg */ */
/**/
/* --color-popover: hsl(39 59% 88%); /* bg1 */ */
/* --color-popover-foreground: hsl(40 13% 23%); /* fg */ */
/**/
/* --color-primary: hsl(0 100% 31%); /* red */ */
/* --color-primary-foreground: hsl(40 92% 88%); /* bg */ */
/**/
/* --color-secondary: hsl(39 46% 81%); /* bg2 */ */
/* --color-secondary-foreground: hsl(40 13% 23%); /* fg */ */
/**/
/* --color-muted: hsl(37 29% 73%); /* bg3 */ */
/* --color-muted-foreground: hsl(40 4% 36%); /* gray */ */
/**/
/* --color-accent: hsl(40 71% 49%); /* yellow */ */
/* --color-accent-foreground: hsl(0 0% 16%); */
/**/
/* --color-destructive: hsl(0 76% 46%); /* bright_red */ */
/* --color-destructive-foreground: hsl(40 92% 88%); /* bg */ */
/**/
/* --color-border: hsl(33 14% 59%); /* fg4 */ */
/* --color-input: hsl(33 14% 59%); /* fg4 */ */
/* --color-ring: hsl(0 100% 31%); /* red */ */
/**/
/* --radius: 0.5rem; */
/* } */
--color-card: hsl(39 59% 88%); /* bg1 */
--color-card-foreground: hsl(40 13% 23%); /* fg */
/* .dark { */
/* /* gruvbox dark theme */ */
/* --color-background: hsl(0 0% 16%); /* bg0 */ */
/* --color-foreground: hsl(40 92% 88%); /* fg */ */
/**/
/* --color-card: hsl(0 7% 23%); /* bg1 */ */
/* --color-card-foreground: hsl(40 92% 88%); /* fg */ */
/**/
/* --color-popover: hsl(0 7% 23%); /* bg1 */ */
/* --color-popover-foreground: hsl(40 92% 88%); /* fg */ */
/**/
/* --color-primary: hsl(6 93% 59%); /* red */ */
/* --color-primary-foreground: hsl(0 0% 16%); /* bg */ */
/**/
/* --color-secondary: hsl(0 5% 29%); /* bg2 */ */
/* --color-secondary-foreground: hsl(40 92% 88%); /* fg */ */
/**/
/* --color-muted: hsl(20 6% 36%); /* bg3 */ */
/* --color-muted-foreground: hsl(33 14% 59%); /* gray */ */
/**/
/* --color-accent: hsl(42 95% 58%); /* yellow */ */
/* --color-accent-foreground: hsl(0 0% 16%); */
/**/
/* --color-destructive: hsl(6 93% 59%); /* bright_red */ */
/* --color-destructive-foreground: hsl(40 92% 88%); /* bg */ */
/**/
/* --color-border: hsl(24 10% 51%); /* fg4 */ */
/* --color-input: hsl(24 10% 51%); /* fg4 */ */
/* --color-ring: hsl(6 93% 59%); /* red */ */
/* } */
:root {
/* Catppuccin Macchiato */
--color-background: #24273a;
--color-foreground: #cad3f5;
--color-card: #1e2030;
--color-card-foreground: #cad3f5;
--color-popover: #1e2030;
--color-popover-foreground: #cad3f5;
--color-primary: #8aadf4;
--color-primary-foreground: #24273a;
--color-secondary: #363a4f;
--color-secondary-foreground: #cad3f5;
--color-muted: #363a4f;
--color-muted-foreground: #a5adcb;
--color-accent: #f4dbd6;
--color-accent-foreground: #24273a;
--color-destructive: #ed8796;
--color-destructive-foreground: #24273a;
--color-border: #363a4f;
--color-input: #363a4f;
--color-ring: #8aadf4;
--radius: 0.5rem;
}
--color-popover: hsl(39 59% 88%); /* bg1 */
--color-popover-foreground: hsl(40 13% 23%); /* fg */
--color-primary: hsl(0 100% 31%); /* red */
--color-primary-foreground: hsl(40 92% 88%); /* bg */
--color-secondary: hsl(39 46% 81%); /* bg2 */
--color-secondary-foreground: hsl(40 13% 23%); /* fg */
--color-muted: hsl(37 29% 73%); /* bg3 */
--color-muted-foreground: hsl(40 4% 36%); /* gray */
--color-accent: hsl(40 71% 49%); /* yellow */
--color-accent-foreground: hsl(0 0% 16%);
--color-destructive: hsl(0 76% 46%); /* bright_red */
--color-destructive-foreground: hsl(40 92% 88%); /* bg */
--color-border: hsl(33 14% 59%); /* fg4 */
--color-input: hsl(33 14% 59%); /* fg4 */
--color-ring: hsl(0 100% 31%); /* red */
--radius: 0.5rem;
}
.dark {
--color-background: hsl(0 0% 16%); /* bg0 */
--color-foreground: hsl(40 92% 88%); /* fg */
--color-card: hsl(0 7% 23%); /* bg1 */
--color-card-foreground: hsl(40 92% 88%); /* fg */
--color-popover: hsl(0 7% 23%); /* bg1 */
--color-popover-foreground: hsl(40 92% 88%); /* fg */
--color-primary: hsl(6 93% 59%); /* red */
--color-primary-foreground: hsl(0 0% 16%); /* bg */
--color-secondary: hsl(0 5% 29%); /* bg2 */
--color-secondary-foreground: hsl(40 92% 88%); /* fg */
--color-muted: hsl(20 6% 36%); /* bg3 */
--color-muted-foreground: hsl(33 14% 59%); /* gray */
--color-accent: hsl(42 95% 58%); /* yellow */
--color-accent-foreground: hsl(0 0% 16%);
--color-destructive: hsl(6 93% 59%); /* bright_red */
--color-destructive-foreground: hsl(40 92% 88%); /* bg */
--color-border: hsl(24 10% 51%); /* fg4 */
--color-input: hsl(24 10% 51%); /* fg4 */
--color-ring: hsl(6 93% 59%); /* red */
}
.dark {
/* Catppuccin Macchiato - we'll use the same colors for dark mode */
--color-background: #24273a;
--color-foreground: #cad3f5;
--color-card: #1e2030;
--color-card-foreground: #cad3f5;
--color-popover: #1e2030;
--color-popover-foreground: #cad3f5;
--color-primary: #8aadf4;
--color-primary-foreground: #24273a;
--color-secondary: #363a4f;
--color-secondary-foreground: #cad3f5;
--color-muted: #363a4f;
--color-muted-foreground: #a5adcb;
--color-accent: #f4dbd6;
--color-accent-foreground: #24273a;
--color-destructive: #ed8796;
--color-destructive-foreground: #24273a;
--color-border: #363a4f;
--color-input: #363a4f;
--color-ring: #8aadf4;
}
* {
@apply box-border;