Theming & Dark Mode

Exhuma features an unopinionated, high-contrast dual-theme engine built on semantic CSS variables and Tailwind CSS v4 design tokens.

Light · Dark · System
HSL tokens

// 01Themes

Dual-Theme Architecture

Every component in Exhuma automatically respects your application's current theme state. We avoid hardcoded hex codes like #000000 or #ffffff, instead linking all backgrounds, borders, typography, and accents to CSS variables declared in HSL.

Light

Light Theme

Optimized for crisp readability in high-ambient lighting with gentle contrast borders.

Dark

Dark Theme

OLED-tuned true blacks and deep neutral slates matching Raycast and shadcn/ui.

System

System Sync

Automatic synchronization with operating system dark mode preferences with zero layout flash.

// 02Tokens

Semantic CSS Variables

Themes are declared in src/styles/themes.scss:

themes.scss

css

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 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: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 9%;
  --radius: 0.75rem;
}

.dark {
  --background: 0 0% 3.9%;
  --foreground: 0 0% 98%;
  --card: 0 0% 4.8%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 4.8%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 98%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
}

// 03Tailwind v4

Tailwind CSS v4 Integration

In Tailwind CSS v4, tokens are declared directly using the @theme directive without needing a legacy tailwind.config.js file:

themes.scss (@theme)

css

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
}

// 04Hydration

NextThemes Hydration Setup

To guarantee seamless theme switching without hydration mismatch warnings in Next.js 15 App Router:

theme-provider.tsx

tsx

// src/providers/theme-provider.tsx
'use client';

import * as React from 'react';
import { ThemeProvider as NextThemesProvider } from 'next-themes';

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  return (
    <NextThemesProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </NextThemesProvider>
  );
}

// 05Branding

Customizing Theme Palettes

Want an emerald, violet, or amber brand identity? Simply override the --primary variable in your root CSS. Exhuma components will instantly inherit your brand styling across all 13 framework contracts.

:root { --background: 0 0% 100%; --foreground: 0 0% 9%; --card: 0 0% 100%; --card-foreground: 0 0% 9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 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: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 9%; --radius: 0.75rem; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 4.8%; --card-foreground: 0 0% 98%; --popover: 0 0% 4.8%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; }

@theme { --color-background: hsl(var(--background)); --color-foreground: hsl(var(--foreground)); --color-card: hsl(var(--card)); --color-card-foreground: hsl(var(--card-foreground)); --color-primary: hsl(var(--primary)); --color-primary-foreground: hsl(var(--primary-foreground)); --color-muted: hsl(var(--muted)); --color-muted-foreground: hsl(var(--muted-foreground)); --color-border: hsl(var(--border)); --color-input: hsl(var(--input)); --color-ring: hsl(var(--ring)); }

// src/providers/theme-provider.tsx 'use client'; import * as React from 'react'; import { ThemeProvider as NextThemesProvider } from 'next-themes'; export function ThemeProvider({ children }: { children: React.ReactNode }) { return ( <NextThemesProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange > {children} </NextThemesProvider> ); }