change color theme to catppuccin
This commit is contained in:
parent
b0eb8aa744
commit
17cb13db21
1 changed files with 108 additions and 60 deletions
|
|
@ -1,67 +1,115 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
/* :root { */
|
||||||
--color-background: hsl(32 92% 87%); /* bg0 */
|
/* /* gruvbox light theme */ */
|
||||||
--color-foreground: hsl(40 13% 23%); /* fg */
|
/* --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 {
|
||||||
|
/* 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-card: hsl(39 59% 88%); /* bg1 */
|
.dark {
|
||||||
--color-card-foreground: hsl(40 13% 23%); /* fg */
|
/* Catppuccin Macchiato - we'll use the same colors for dark mode */
|
||||||
|
--color-background: #24273a;
|
||||||
--color-popover: hsl(39 59% 88%); /* bg1 */
|
--color-foreground: #cad3f5;
|
||||||
--color-popover-foreground: hsl(40 13% 23%); /* fg */
|
--color-card: #1e2030;
|
||||||
|
--color-card-foreground: #cad3f5;
|
||||||
--color-primary: hsl(0 100% 31%); /* red */
|
--color-popover: #1e2030;
|
||||||
--color-primary-foreground: hsl(40 92% 88%); /* bg */
|
--color-popover-foreground: #cad3f5;
|
||||||
|
--color-primary: #8aadf4;
|
||||||
--color-secondary: hsl(39 46% 81%); /* bg2 */
|
--color-primary-foreground: #24273a;
|
||||||
--color-secondary-foreground: hsl(40 13% 23%); /* fg */
|
--color-secondary: #363a4f;
|
||||||
|
--color-secondary-foreground: #cad3f5;
|
||||||
--color-muted: hsl(37 29% 73%); /* bg3 */
|
--color-muted: #363a4f;
|
||||||
--color-muted-foreground: hsl(40 4% 36%); /* gray */
|
--color-muted-foreground: #a5adcb;
|
||||||
|
--color-accent: #f4dbd6;
|
||||||
--color-accent: hsl(40 71% 49%); /* yellow */
|
--color-accent-foreground: #24273a;
|
||||||
--color-accent-foreground: hsl(0 0% 16%);
|
--color-destructive: #ed8796;
|
||||||
|
--color-destructive-foreground: #24273a;
|
||||||
--color-destructive: hsl(0 76% 46%); /* bright_red */
|
--color-border: #363a4f;
|
||||||
--color-destructive-foreground: hsl(40 92% 88%); /* bg */
|
--color-input: #363a4f;
|
||||||
|
--color-ring: #8aadf4;
|
||||||
--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 */
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@apply box-border;
|
@apply box-border;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue