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

158
src/assets/index.css
View file

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