Components API Reference

ThemeProvider

The root provider component that powers the theming system. Must wrap your application.

Import

import { ThemeProvider } from '@mindfiredigital/ignix-ui';

Props

Prop	Type	Default	Description
children	React.ReactNode	-	Your application's components
defaultThemeId	string	'ignix-light'	Initial theme if none is found in storage
persistKey	string	'ignix-theme'	localStorage key for theme persistence
onThemeChange	(theme: ThemeConfig) => void	-	Callback when theme changes
enableSystemPreference	boolean	true	Respect OS color scheme preference

Example

function App() {
  return (
    <ThemeProvider defaultThemeId="cyberpunk-neon">
      <YourApp />
    </ThemeProvider>
  );
}

---

ThemeSwitcher

A component that allows users to browse and select themes.

Import

import { ThemeSwitcher } from '@mindfiredigital/ignix-ui';

Props

Prop	Type	Default	Description
layout	'dropdown' | 'grid' | 'list'	'dropdown'	Visual layout type
showPreview	boolean	true	Show color swatches
showCategories	boolean	true	Group themes by category
showModeToggle	boolean	true	Show light/dark toggle
className	string	-	Additional CSS class
onThemeSelect	(theme: ThemeConfig) => void	-	Theme selection callback

Example

<ThemeSwitcher 
  layout="grid"
  onThemeSelect={(theme) => console.log('Selected:', theme.id)}
/>

---

ThemeEngine

The core engine that powers the Ignix UI theming system. Provides methods for creating, validating, and converting themes.

Import

import { ThemeEngine } from '@mindfiredigital/ignix-ui';

ThemeEngine.createTheme(input: CreateThemeInput)

Creates a new theme with automatic color generation and dark mode support.

Parameters

Parameter	Type	Description
input	CreateThemeInput	Configuration object for the theme

Example

const theme = ThemeEngine.createTheme({
  id: 'ocean-theme',
  name: 'Ocean Theme',
  category: 'brand',
  primary: '#2563EB',
  secondary: '#14B8A6',
  accent: '#F59E0B',
  description: 'A cool, ocean-inspired color palette',
  generateDark: true,
  contrastLevel: 'AA',
  mode: 'light', // defaults to 'light'
});

ThemeEngine.validateAndFix(theme: ThemeConfig, level: ContrastLevel)

Validates a theme against accessibility standards and attempts to fix any issues.

Parameters

Parameter	Type	Description
theme	ThemeConfig	The theme to validate
level	`'AA'	'AAA'`

Returns

{
  theme: ThemeConfig;     // The fixed theme (if changes were made)
  validation: {
    isValid: boolean;     // Whether the theme passes validation
    errors: string[];     // Array of error messages
    warnings: string[];   // Array of warning messages
    score: number;        // Overall accessibility score (0-100)
  }
}

Example

const { theme: fixedTheme, validation } = ThemeEngine.validateAndFix(theme, 'AA');
console.log(validation.isValid); // true
console.log(validation.errors); // []
console.log(validation.score); // 100

ThemeEngine.toCss(theme: ThemeConfig)

Generates CSS custom properties from a theme.

Parameters

Parameter	Type	Description
theme	ThemeConfig	The theme to convert to CSS

Returns

A string containing CSS custom properties for both light and dark modes.

Example

const css = ThemeEngine.toCss(theme);
// Returns CSS with :root and .dark selectors

ColorUtils

Utility class for color manipulation and contrast checking.

Import

import { ColorUtils } from '@mindfiredigital/ignix-ui';

Methods

Color Conversion

// Convert between color formats
const hsl = ColorUtils.hexToHsl('#2563EB');
const hex = ColorUtils.hslToHex(210, 83, 57);

Color Adjustments

// Adjust color properties
const lighter = ColorUtils.adjustLightness('#2563EB', 10);
const moreSaturated = ColorUtils.adjustSaturation('#2563EB', 20);
const shiftedHue = ColorUtils.adjustHue('#2563EB', 30);

Color Relationships

// Get color relationships
const complementary = ColorUtils.getComplementary('#2563EB');
const [analogous1, analogous2] = ColorUtils.getAnalogous('#2563EB');
const [triadic1, triadic2] = ColorUtils.getTriadic('#2563EB');

Contrast Checking

// Check contrast ratios
const ratio = ColorUtils.getContrastRatio('#FFFFFF', '#000000');
const isAccessible = ColorUtils.isAccessible('#FFFFFF', '#000000', 'AA');

Next

• Hooks