Theming

Aqua Fusion uses CSS custom properties (variables) for theming. Override them in your own CSS to match your brand.

How it works

theme.css defines default values as CSS variables on :root
The Tailwind preset maps these variables to utility classes
You override variables to customize the entire system

Quick customization

:root {
  /* Change the primary brand color */
  --aqua-color-primary-500: 99 102 241; /* indigo */
  --aqua-color-primary-600: 79 70 229;
  --aqua-color-primary-700: 67 56 202;

  /* Change the font */
  --aqua-font-sans: 'Roboto', system-ui, sans-serif;

  /* Change border radius */
  --aqua-radius-default: 0.5rem;
}

All components using bg-primary-500, text-primary-600, font-sans, or rounded-ui will automatically use your custom values.

Color tokens

Primary (brand)

Variable	Default	Description
`--aqua-color-primary-50`	`240 249 255`	Lightest tint
`--aqua-color-primary-100`	`224 242 254`
`--aqua-color-primary-200`	`186 230 253`
`--aqua-color-primary-300`	`125 211 252`
`--aqua-color-primary-400`	`56 189 248`
`--aqua-color-primary-500`	`14 165 233`	Base brand color
`--aqua-color-primary-600`	`2 132 199`	Hover state
`--aqua-color-primary-700`	`3 105 161`	Active state
`--aqua-color-primary-800`	`7 89 133`
`--aqua-color-primary-900`	`12 74 110`	Darkest shade

Colors use space-separated RGB values (e.g., 14 165 233) to support Tailwind's opacity modifier syntax: bg-primary-500/50.

Semantic text

Variable	Default	Tailwind class
`--aqua-text-primary`	`17 24 39` (gray-900)	`text-content-primary`
`--aqua-text-secondary`	`75 85 99` (gray-600)	`text-content-secondary`
`--aqua-text-tertiary`	`107 114 128` (gray-500)	`text-content-tertiary`
`--aqua-text-disabled`	`156 163 175` (gray-400)	`text-content-disabled`
`--aqua-text-inverse`	`255 255 255` (white)	`text-content-inverse`

Semantic backgrounds

Variable	Default	Tailwind class
`--aqua-bg-default`	`255 255 255` (white)	`bg-surface`
`--aqua-bg-subtle`	`249 250 251` (gray-50)	`bg-surface-subtle`
`--aqua-bg-muted`	`243 244 246` (gray-100)	`bg-surface-muted`
`--aqua-bg-emphasis`	`229 231 235` (gray-200)	`bg-surface-emphasis`
`--aqua-bg-inverse`	`17 24 39` (gray-900)	`bg-surface-inverse`

Semantic borders

Variable	Default	Tailwind class
`--aqua-border-default`	`229 231 235` (gray-200)	`border-line`
`--aqua-border-subtle`	`243 244 246` (gray-100)	`border-line-subtle`
`--aqua-border-emphasis`	`209 213 219` (gray-300)	`border-line-emphasis`

Feedback colors

Token	50	500	600	700	800
`--aqua-success-*`	Green tint	Green	Dark green	Darker	Darkest
`--aqua-warning-*`	Amber tint	Amber	Dark amber	Darker	Darkest
`--aqua-error-*`	Red tint	Red	Dark red	Darker	Darkest
`--aqua-info-*`	Blue tint	Blue	Dark blue	Darker	Darkest

Border radius

Variable	Default	Tailwind class
`--aqua-radius-sm`	`0.125rem` (2px)	`rounded-ui-sm`
`--aqua-radius-default`	`0.25rem` (4px)	`rounded-ui`
`--aqua-radius-md`	`0.375rem` (6px)	`rounded-ui-md`
`--aqua-radius-lg`	`0.5rem` (8px)	`rounded-ui-lg`
`--aqua-radius-xl`	`0.75rem` (12px)	`rounded-ui-xl`
`--aqua-radius-2xl`	`1rem` (16px)	`rounded-ui-2xl`
`--aqua-radius-full`	`9999px`	`rounded-ui-full`

Shadows

Variable	Tailwind class	Usage
`--aqua-shadow-sm`	`shadow-ui-sm`	Subtle elevation
`--aqua-shadow-default`	`shadow-ui`	Standard cards
`--aqua-shadow-md`	`shadow-ui-md`	Dropdowns
`--aqua-shadow-lg`	`shadow-ui-lg`	Modals
`--aqua-shadow-xl`	`shadow-ui-xl`	Maximum elevation

Typography

Variable	Default	Tailwind class
`--aqua-font-sans`	`'Inter', system-ui, sans-serif`	`font-sans`
`--aqua-font-display`	`'Poppins', sans-serif`	`font-display`

Dark mode

Aqua Fusion includes dark mode support. Add the dark class to your <html> element:

<html class="dark">

The theme CSS defines .dark selector overrides for text, background, and border colors. No additional configuration is needed.

Toggle dark mode with JavaScript

function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

Respect system preference

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) {
  document.documentElement.classList.add('dark');
}

Aqua Fusion also provides the usePrefersDarkMode hook:

import { usePrefersDarkMode } from '@wavebooking/aqua-fusion/hooks';

function App() {
  const prefersDark = usePrefersDarkMode();
  // Apply dark class based on preference
}