app.css
1 @import 'tailwindcss'; 2 @import 'tw-animate-css'; 3 4 @custom-variant dark (&:is(.dark *)); 5 6 :root { 7 --radius: 0.625rem; 8 --background: oklch(1 0 0); 9 --foreground: oklch(0.129 0.042 264.695); 10 --card: oklch(1 0 0); 11 --card-foreground: oklch(0.129 0.042 264.695); 12 --popover: oklch(1 0 0); 13 --popover-foreground: oklch(0.129 0.042 264.695); 14 --primary: oklch(0.208 0.042 265.755); 15 --primary-foreground: oklch(0.984 0.003 247.858); 16 --secondary: oklch(0.968 0.007 247.896); 17 --secondary-foreground: oklch(0.208 0.042 265.755); 18 --muted: oklch(0.968 0.007 247.896); 19 --muted-foreground: oklch(0.554 0.046 257.417); 20 --accent: oklch(0.968 0.007 247.896); 21 --accent-foreground: oklch(0.208 0.042 265.755); 22 --destructive: oklch(0.577 0.245 27.325); 23 --border: oklch(0.929 0.013 255.508); 24 --input: oklch(0.929 0.013 255.508); 25 --ring: oklch(0.704 0.04 256.788); 26 --chart-1: oklch(0.646 0.222 41.116); 27 --chart-2: oklch(0.6 0.118 184.704); 28 --chart-3: oklch(0.398 0.07 227.392); 29 --chart-4: oklch(0.828 0.189 84.429); 30 --chart-5: oklch(0.769 0.188 70.08); 31 --sidebar: oklch(0.984 0.003 247.858); 32 --sidebar-foreground: oklch(0.129 0.042 264.695); 33 --sidebar-primary: oklch(0.208 0.042 265.755); 34 --sidebar-primary-foreground: oklch(0.984 0.003 247.858); 35 --sidebar-accent: oklch(0.968 0.007 247.896); 36 --sidebar-accent-foreground: oklch(0.208 0.042 265.755); 37 --sidebar-border: oklch(0.929 0.013 255.508); 38 --sidebar-ring: oklch(0.704 0.04 256.788); 39 } 40 41 .dark { 42 --background: oklch(0.129 0.042 264.695); 43 --foreground: oklch(0.984 0.003 247.858); 44 --card: oklch(0.208 0.042 265.755); 45 --card-foreground: oklch(0.984 0.003 247.858); 46 --popover: oklch(0.208 0.042 265.755); 47 --popover-foreground: oklch(0.984 0.003 247.858); 48 --primary: oklch(0.929 0.013 255.508); 49 --primary-foreground: oklch(0.208 0.042 265.755); 50 --secondary: oklch(0.279 0.041 260.031); 51 --secondary-foreground: oklch(0.984 0.003 247.858); 52 --muted: oklch(0.279 0.041 260.031); 53 --muted-foreground: oklch(0.704 0.04 256.788); 54 --accent: oklch(0.279 0.041 260.031); 55 --accent-foreground: oklch(0.984 0.003 247.858); 56 --destructive: oklch(0.704 0.191 22.216); 57 --border: oklch(1 0 0 / 10%); 58 --input: oklch(1 0 0 / 15%); 59 --ring: oklch(0.551 0.027 264.364); 60 --chart-1: oklch(0.488 0.243 264.376); 61 --chart-2: oklch(0.696 0.17 162.48); 62 --chart-3: oklch(0.769 0.188 70.08); 63 --chart-4: oklch(0.627 0.265 303.9); 64 --chart-5: oklch(0.645 0.246 16.439); 65 --sidebar: oklch(0.208 0.042 265.755); 66 --sidebar-foreground: oklch(0.984 0.003 247.858); 67 --sidebar-primary: oklch(0.488 0.243 264.376); 68 --sidebar-primary-foreground: oklch(0.984 0.003 247.858); 69 --sidebar-accent: oklch(0.279 0.041 260.031); 70 --sidebar-accent-foreground: oklch(0.984 0.003 247.858); 71 --sidebar-border: oklch(1 0 0 / 10%); 72 --sidebar-ring: oklch(0.551 0.027 264.364); 73 } 74 75 @theme inline { 76 --radius-sm: calc(var(--radius) - 4px); 77 --radius-md: calc(var(--radius) - 2px); 78 --radius-lg: var(--radius); 79 --radius-xl: calc(var(--radius) + 4px); 80 --color-background: var(--background); 81 --color-foreground: var(--foreground); 82 --color-card: var(--card); 83 --color-card-foreground: var(--card-foreground); 84 --color-popover: var(--popover); 85 --color-popover-foreground: var(--popover-foreground); 86 --color-primary: var(--primary); 87 --color-primary-foreground: var(--primary-foreground); 88 --color-secondary: var(--secondary); 89 --color-secondary-foreground: var(--secondary-foreground); 90 --color-muted: var(--muted); 91 --color-muted-foreground: var(--muted-foreground); 92 --color-accent: var(--accent); 93 --color-accent-foreground: var(--accent-foreground); 94 --color-destructive: var(--destructive); 95 --color-border: var(--border); 96 --color-input: var(--input); 97 --color-ring: var(--ring); 98 --color-chart-1: var(--chart-1); 99 --color-chart-2: var(--chart-2); 100 --color-chart-3: var(--chart-3); 101 --color-chart-4: var(--chart-4); 102 --color-chart-5: var(--chart-5); 103 --color-sidebar: var(--sidebar); 104 --color-sidebar-foreground: var(--sidebar-foreground); 105 --color-sidebar-primary: var(--sidebar-primary); 106 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); 107 --color-sidebar-accent: var(--sidebar-accent); 108 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); 109 --color-sidebar-border: var(--sidebar-border); 110 --color-sidebar-ring: var(--sidebar-ring); 111 } 112 113 @layer base { 114 * { 115 @apply border-border outline-ring/50; 116 } 117 body { 118 @apply bg-background text-foreground; 119 } 120 }