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

add color theme with dark and light mode!

Browse source
This commit is contained in:
padreug 2025-02-02 18:44:05 +01:00
parent 08b505c145
commit 23081d8685
5 changed files with 184 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

172
src/assets/index.css
View file

@ -1,76 +1,100 @@
@import "tailwindcss";
/* @layer base { */
/* :root { */
/* --background: 0 0% 100%; */
/* --foreground: 222.2 84% 4.9%; */
/**/
/* --muted: 210 40% 96.1%; */
/* --muted-foreground: 215.4 16.3% 46.9%; */
/**/
/* --popover: 0 0% 100%; */
/* --popover-foreground: 222.2 84% 4.9%; */
/**/
/* --card: 0 0% 100%; */
/* --card-foreground: 222.2 84% 4.9%; */
/**/
/* --border: 214.3 31.8% 91.4%; */
/* --input: 214.3 31.8% 91.4%; */
/**/
/* --primary: 222.2 47.4% 11.2%; */
/* --primary-foreground: 210 40% 98%; */
/**/
/* --secondary: 210 40% 96.1%; */
/* --secondary-foreground: 222.2 47.4% 11.2%; */
/**/
/* --accent: 210 40% 96.1%; */
/* --accent-foreground: 222.2 47.4% 11.2%; */
/**/
/* --destructive: 0 84.2% 60.2%; */
/* --destructive-foreground: 210 40% 98%; */
/**/
/* --ring: 222.2 84% 4.9%; */
/**/
/* --radius: 0.5rem; */
/* } */
/**/
/* .dark { */
/* --background: 222.2 84% 4.9%; */
/* --foreground: 210 40% 98%; */
/**/
/* --muted: 217.2 32.6% 17.5%; */
/* --muted-foreground: 215 20.2% 65.1%; */
/**/
/* --popover: 222.2 84% 4.9%; */
/* --popover-foreground: 210 40% 98%; */
/**/
/* --card: 222.2 84% 4.9%; */
/* --card-foreground: 210 40% 98%; */
/**/
/* --border: 217.2 32.6% 17.5%; */
/* --input: 217.2 32.6% 17.5%; */
/**/
/* --primary: 210 40% 98%; */
/* --primary-foreground: 222.2 47.4% 11.2%; */
/**/
/* --secondary: 217.2 32.6% 17.5%; */
/* --secondary-foreground: 210 40% 98%; */
/**/
/* --accent: 217.2 32.6% 17.5%; */
/* --accent-foreground: 210 40% 98%; */
/**/
/* --destructive: 0 62.8% 30.6%; */
/* --destructive-foreground: 210 40% 98%; */
/**/
/* --ring: 212.7 26.8% 83.9%; */
/* } */
/* } */
/**/
/* @layer base { */
/* * { */
/* @apply border-border; */
/* } */
/* body { */
/* @apply bg-background text-foreground; */
/* } */
/* } */
@layer base {
:root {
--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 {
--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;
}
body {
@apply bg-background text-foreground;
}
}
@utility bg-background {
background-color: var(--color-background);
}
@utility text-foreground {
color: var(--color-foreground);
}
/* Add other utility classes for colors */
@utility bg-card {
background-color: var(--color-card);
}
@utility text-card-foreground {
color: var(--color-card-foreground);
}
@utility bg-primary {
background-color: var(--color-primary);
}
@utility text-primary-foreground {
color: var(--color-primary-foreground);
}
/* ... add other utility classes as needed ... */