globals.css 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. @import "tailwindcss";
  2. @theme {
  3. /* Light mode colors */
  4. --color-background: #ffffff;
  5. --color-foreground: #09090b;
  6. --color-card: #ffffff;
  7. --color-card-foreground: #09090b;
  8. --color-popover: #ffffff;
  9. --color-popover-foreground: #09090b;
  10. --color-primary: #18181b;
  11. --color-primary-foreground: #fafafa;
  12. --color-secondary: #f4f4f5;
  13. --color-secondary-foreground: #18181b;
  14. --color-muted: #f4f4f5;
  15. --color-muted-foreground: #71717a;
  16. --color-accent: #f4f4f5;
  17. --color-accent-foreground: #18181b;
  18. --color-destructive: #ef4444;
  19. --color-destructive-foreground: #fafafa;
  20. --color-border: #e4e4e7;
  21. --color-input: #e4e4e7;
  22. --color-ring: #18181b;
  23. }
  24. @media (prefers-color-scheme: dark) {
  25. @theme {
  26. --color-background: #09090b;
  27. --color-foreground: #fafafa;
  28. --color-card: #09090b;
  29. --color-card-foreground: #fafafa;
  30. --color-popover: #09090b;
  31. --color-popover-foreground: #fafafa;
  32. --color-primary: #fafafa;
  33. --color-primary-foreground: #18181b;
  34. --color-secondary: #27272a;
  35. --color-secondary-foreground: #fafafa;
  36. --color-muted: #27272a;
  37. --color-muted-foreground: #a1a1aa;
  38. --color-accent: #27272a;
  39. --color-accent-foreground: #fafafa;
  40. --color-destructive: #7f1d1d;
  41. --color-destructive-foreground: #fafafa;
  42. --color-border: #27272a;
  43. --color-input: #27272a;
  44. --color-ring: #d4d4d8;
  45. }
  46. }
  47. body {
  48. background-color: var(--color-background);
  49. color: var(--color-foreground);
  50. font-feature-settings: "rlig" 1, "calt" 1;
  51. }