Theming

Customize the appearance of your components using CSS variables and Tailwind CSS. mokri UI uses a CSS variable-based theming system that works seamlessly with both light and dark modes.

Overview

mokri UI uses CSS variables for theming, which allows you to customize colors globally. All colors are defined using HSL format, making it easy to create cohesive color schemes that automatically adapt to light and dark modes.

CSS Variables

Define your theme colors using CSS variables in your globals.css file:

<> app/globals.css

// app/globals.css (Tailwind v4)
@import "tailwindcss";
@plugin "tailwindcss-animate";
@import "mokri-ui/tailwind.css"; // makes Tailwind scan mokri-ui

:root {
  --background: #ffffff;
  --foreground: #171717;
  --card: #ffffff;
  --card-foreground: #171717;
  --popover: #ffffff;
  --popover-foreground: #171717;
  --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%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

[data-theme="dark"] {
  --background: #0A0A0A;
  --foreground: #E5E5E5;
  --card: #0A0A0A;
  --card-foreground: #E5E5E5;
  --popover: #0A0A0A;
  --popover-foreground: #E5E5E5;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: #262626;
  --input: #262626;
  --ring: #3d3e3f;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}

Tailwind v4 mapping

No tailwind.config.ts is required. Mapping is done in CSS with@theme inline as shown below:

<> globals.css (@theme inline)

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  // ... see globals.css
}

Color Mapping

Understand how CSS variables map to Tailwind utility classes:

<> color-mapping.txt

// How CSS variables map to Tailwind classes (via @theme inline)
--background → bg-background
--foreground → text-foreground
--primary → bg-primary, text-primary, border-primary
--primary-foreground → text-primary-foreground
--secondary → bg-secondary, text-secondary
--muted → bg-muted, text-muted-foreground
--accent → bg-accent, text-accent
--destructive → bg-destructive, text-destructive
--border → border-border
--ring → ring-ring

Customizing Colors

You can customize any color by updating the corresponding CSS variable:

<> app/globals.css

// Example: Customizing individual colors
:root {
  /* Change primary color */
  --primary: 221.2 83.2% 53.3%; /* Blue */
  
  /* Change radius */
  --radius: 0.75rem; /* More rounded corners */
}

.dark {
  --primary: 217.2 91.2% 59.8%; /* Lighter blue for dark mode */
}

Colors use HSL format: hue saturation% lightness%. The values are space-separated (not comma-separated) for use with Tailwind's HSL function.

Usage in Components

Use theme colors in your components with Tailwind utility classes:

<> components/themed.tsx

// Using theme colors in components
import { Button } from 'mokri-ui'
import { Card } from 'mokri-ui'

export default function ThemedComponent() {
  return (
    <Card className="bg-card text-card-foreground">
      <h2 className="text-primary font-bold">Primary Heading</h2>
      <p className="text-muted-foreground">Muted text content</p>
      <Button className="bg-primary text-primary-foreground">
        Primary Button
      </Button>
    </Card>
  )
}

Dark Mode

Dark mode is automatically supported through the .dark class. When the dark class is applied to your html or body element, all components will automatically use the dark theme colors.

<> app/layout.tsx

// Enable dark mode
<html lang="en" className="dark">
  <body>...</body>
</html>

// Or toggle dynamically
document.documentElement.classList.toggle('dark')

Available Color Tokens

The following color tokens are available for customization:

Base Colors

--background - Page background
--foreground - Primary text
--border - Border color
--input - Input border
--ring - Focus ring

Semantic Colors

--primary - Primary brand color
--secondary - Secondary color
--accent - Accent highlights
--muted - Muted backgrounds
--destructive - Error/danger color

Component Colors

--card - Card backgrounds
--popover - Popover backgrounds
--radius - Border radius value