Theming

Theming is the visual system layer of your app. In Altech UI, it is powered by CSS variables (design tokens) that define shared values such as colors, radius, and surface contrast.

Use theming when you want to:

• Keep the UI consistent across all pages and components.
• Rebrand quickly without rewriting component code.
• Support multiple visual variants (for example light, dark, or brand-specific themes).

:root {
  --altech-background: #f7fafc;
  --altech-foreground: #0e1628;
  --altech-radius: 10px;
  --altech-primary: #0f62fe;
  --altech-primary-foreground: #f8fbff;
  --altech-muted: #e9effa;
  --altech-border: #d5dfef;
  --altech-danger: #d92d20;
  --altech-success: #12b76a;
  --altech-warning: #f79009;
}

Developer rules

• Always use semantic tokens (--altech-background, --altech-foreground) instead of hardcoded hex colors inside components.
• Keep components token-driven, so the same component works across all themes.
• Use Tailwind for layout/spacing and keep theme values in tokens.
• Use className only for contextual styling, not for replacing core token behavior.

Relationship with Dark Mode

Dark Mode is not a separate styling system. It is one theme variant that overrides token values.

• Theming defines the architecture and token names.
• Dark Mode only changes token values for low-light UI.

Example usage

Altech UI components work naturally with Tailwind classes while staying token-aware:

<Button className="rounded-full px-7 shadow-lg">Custom CTA</Button>