Theming

Learn how to customize the visual language of your application using our sophisticated design token system.

System Architecture

Aarogya is built with high customizability in mind. You can override everything from primary colors to individual component radii.

Color Overrides

Define your brand's primary and secondary shades in your CSS variables.

Rounded Everything

Global control over the border-radius of cards, inputs, and buttons.

Core Design Tokens

Our design system uses a curated set of functional tokens to maintain a professional, soft aesthetic.

Token Name	Description	Preview
--color-primary	The main brand identity color.
--color-background	Main canvas background.
--color-card	Surface color for containers.

Dark Mode Implementation

Aarogya supports dark mode out of the box using Tailwind's .dark selector.

When the .dark class is applied to your html tag, the system automatically swaps all functional tokens to their dark counterparts.

globals.css

/* Light Mode (Base) */
:root {
  --color-background: #FFFBF1;
  --color-foreground: #2D3748;
}

.dark {
  --color-background: #0C0C0E;
  --color-foreground: #F8F8F8;
}

Installation

Next Up