Skip to main content

CSS Variables & Theming

Color System​

Location: src/app/globals.css

The application uses CSS variables for theming, enabling:

  • ✅ Light/Dark mode support
  • ✅ Consistent colors across components
  • ✅ Easy theme customization

Light Mode Variables​

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 100% 45%;
  --destructive-foreground: 0 0% 98%;
  --success: 120 60% 50%;
  --success-foreground: 120 100% 98%;
  --warning: 45 100% 51%;
  --warning-foreground: 45 100% 10%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;
}

Dark Mode Variables​

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  /* ... more dark mode colors */
}

Using CSS Variables​

// In Tailwind classes
<div className="bg-background text-foreground border-border">
  <button className="bg-primary text-primary-foreground">
    Button
  </button>
</div>

// In custom CSS
.custom-element {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

Custom CSS​

Location: src/app/globals.css

The application includes custom CSS for:

  • Scrollbar styling
  • Sidebar customization
  • Table sticky headers
  • Responsive breakpoints
  • Component-specific styles

Example:

/* Custom scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--border)) transparent;
}

/* Sticky table headers */
.c_make-table-header-sticky {
  thead {
    position: sticky;
    top: 0px;
    background-color: white;
    z-index: 2;
  }
}

/* Responsive container */
.centered-full-w-container {
  max-width: 1600px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}