Deep inspection and validation for theme development

Theme Inspector

Detailed inspection and debugging information for themes. Validate structure, check accessibility, and review generated CSS variables.

Theme Inspector Component

ThemeInspector provides comprehensive analysis of your theme configuration, including validation, accessibility checks, and CSS variable generation preview.

Overview

The ThemeInspector component is a powerful debugging tool that provides detailed insights into your theme's structure, validates configuration, checks for accessibility issues, and shows how your theme will be transformed into CSS variables.

✨ Try it now: Interactive Inspector Example — Analyze and validate a sample theme directly in your browser.

Key Features

Theme Metadata - Display theme name, version, and statistics
Validation - Comprehensive error and warning reporting
Accessibility Checks - Contrast ratio analysis and WCAG compliance
CSS Variables Preview - See generated CSS custom properties
Structure Visualization - Interactive theme structure tree

Basic Usage

Simple Inspector

TSX

import { ThemeInspector } from '@shohojdhara/atomix/theme/devtools';
import { createTheme } from '@shohojdhara/atomix/theme';

const theme = createTheme({
  name: 'My Theme',
  palette: {
    primary: { main: '#7AFFD7' },
    secondary: { main: '#FF5733' },
  },
});

function App() {
  return (
    <ThemeInspector
      theme={theme}
      showValidation={true}
      showCSSVariables={true}
      showStructure={true}
    />
  );
}

21 lines434 characters

With Custom Styling

TSX

<ThemeInspector
  theme={theme}
  showValidation={true}
  className="my-inspector"
  style={{ maxWidth: '800px', margin: '0 auto' }}
/>

6 lines135 characters

Props API

Prop	Type	Default	Description
`theme`	`Theme`	Required	Theme object to inspect
`showValidation`	`boolean`	`false`	Show validation results with errors and warnings
`showCSSVariables`	`boolean`	`false`	Show generated CSS custom properties
`showStructure`	`boolean`	`false`	Show theme structure tree visualization
`className`	`string`	-	Custom CSS class name
`style`	`CSSProperties`	-	Inline styles object

Advanced Examples

Development Dashboard

Integrate inspector into a development dashboard:

TSX

import { ThemeInspector } from '@shohojdhara/atomix/theme/devtools';
import { useState } from 'react';

function ThemeDevelopmentDashboard() {
  const [theme, setTheme] = useState(myTheme);
  const [activeTab, setActiveTab] = useState('validation');

  return (
    <div className="dashboard">
      <div className="tabs">
        <button onClick={() => setActiveTab('validation')}>
          Validation
        </button>
        <button onClick={() => setActiveTab('css')}>
          CSS Variables
        </button>
        <button onClick={() => setActiveTab('structure')}>
          Structure
        </button>
      </div>

      <ThemeInspector
        theme={theme}
        showValidation={activeTab === 'validation'}
        showCSSVariables={activeTab === 'css'}
        showStructure={activeTab === 'structure'}
      />
    </div>
  );
}

30 lines847 characters

Testing Integration

Use inspector programmatically in tests:

TSX

import { ThemeValidator } from '@shohojdhara/atomix/theme';

describe('Theme Validation', () => {
  it('should validate theme structure', () => {
    const theme = createTheme({
      palette: { primary: { main: '#7AFFD7' } },
    });

    const validator = new ThemeValidator();
    const result = validator.validate(theme);

    expect(result.valid).toBe(true);
    expect(result.errors).toHaveLength(0);
  });

  it('should detect accessibility issues', () => {
    const theme = createTheme({
      palette: {
        primary: { main: '#FFFF00' }, // Poor contrast
        background: { default: '#FFFFFF' },
      },
    });

    const validator = new ThemeValidator();
    const result = validator.validate(theme);

    expect(result.warnings).toContain(
      expect.objectContaining({
        type: 'accessibility',
        message: expect.stringContaining('contrast'),
      })
    );
  });
});

34 lines903 characters

Storybook Addon

Create a Storybook addon for theme inspection:

TSX

// .storybook/addons/ThemeInspectorAddon.tsx
import { ThemeInspector } from '@shohojdhara/atomix/theme/devtools';
import { useGlobals } from '@storybook/manager-api';

export function ThemeInspectorAddon() {
  const [{ theme }] = useGlobals();

  return (
    <div className="storybook-addon">
      <ThemeInspector
        theme={theme}
        showValidation={true}
        showCSSVariables={true}
      />
    </div>
  );
}

17 lines426 characters

Validation Features

What Gets Validated

Required Properties - Ensures all required theme properties are present
Type Checking - Validates property types and formats
Color Formats - Checks for valid hex, RGB, or HSL colors
Contrast Ratios - Analyzes text/background contrast for WCAG compliance
Font Families - Validates font family declarations
Spacing Values - Ensures valid spacing scale values

Tip: Validation runs once on mount and is memoized for performance. Results are cached until the theme object changes.

Error Levels

Errors (Red)

Critical issues that will prevent the theme from working correctly. Must be fixed before using the theme in production.

Warnings (Yellow)

Non-critical issues that may cause problems or accessibility concerns. Should be reviewed and addressed when possible.

Info (Blue)

Suggestions for improvements or best practices. Optional but recommended.

Best Practices

Use During Development

Always keep ThemeInspector open during theme development to catch issues as you make changes. Enable all inspection features for comprehensive feedback.

Check Accessibility

Pay special attention to accessibility warnings. Ensure all text/background combinations meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text).

Review CSS Variables

Use the CSS variables view to verify that your theme generates the expected custom properties. This helps debug issues with theme application.

Development Only

ThemeInspector is designed for development environments. Remove it from production builds to reduce bundle size and improve performance.

Related Tools

Combine ThemeInspector with other devtools for a complete development workflow:

→ Theme Preview - Test themes with sample components → Theme Comparator - Compare theme versions → Live Editor - Edit themes in real-time ← Back to Devtools Overview

Deep inspection and validation for theme development

Theme Inspector

Detailed inspection and debugging information for themes. Validate structure, check accessibility, and review generated CSS variables.

Theme Inspector Component

ThemeInspector provides comprehensive analysis of your theme configuration, including validation, accessibility checks, and CSS variable generation preview.

Overview

✨ Try it now: Interactive Inspector Example — Analyze and validate a sample theme directly in your browser.

Key Features

Theme Metadata - Display theme name, version, and statistics
Validation - Comprehensive error and warning reporting
Accessibility Checks - Contrast ratio analysis and WCAG compliance
CSS Variables Preview - See generated CSS custom properties
Structure Visualization - Interactive theme structure tree

Basic Usage

Simple Inspector

TSX

import { ThemeInspector } from '@shohojdhara/atomix/theme/devtools';
import { createTheme } from '@shohojdhara/atomix/theme';

const theme = createTheme({
  name: 'My Theme',
  palette: {
    primary: { main: '#7AFFD7' },
    secondary: { main: '#FF5733' },
  },
});

function App() {
  return (
    <ThemeInspector
      theme={theme}
      showValidation={true}
      showCSSVariables={true}
      showStructure={true}
    />
  );
}

21 lines434 characters

With Custom Styling

TSX

<ThemeInspector
  theme={theme}
  showValidation={true}
  className="my-inspector"
  style={{ maxWidth: '800px', margin: '0 auto' }}
/>

6 lines135 characters

Props API

Prop	Type	Default	Description
`theme`	`Theme`	Required	Theme object to inspect
`showValidation`	`boolean`	`false`	Show validation results with errors and warnings
`showCSSVariables`	`boolean`	`false`	Show generated CSS custom properties
`showStructure`	`boolean`	`false`	Show theme structure tree visualization
`className`	`string`	-	Custom CSS class name
`style`	`CSSProperties`	-	Inline styles object

Advanced Examples

Development Dashboard

Integrate inspector into a development dashboard:

TSX

import { ThemeInspector } from '@shohojdhara/atomix/theme/devtools';
import { useState } from 'react';

function ThemeDevelopmentDashboard() {
  const [theme, setTheme] = useState(myTheme);
  const [activeTab, setActiveTab] = useState('validation');

  return (
    <div className="dashboard">
      <div className="tabs">
        <button onClick={() => setActiveTab('validation')}>
          Validation
        </button>
        <button onClick={() => setActiveTab('css')}>
          CSS Variables
        </button>
        <button onClick={() => setActiveTab('structure')}>
          Structure
        </button>
      </div>

      <ThemeInspector
        theme={theme}
        showValidation={activeTab === 'validation'}
        showCSSVariables={activeTab === 'css'}
        showStructure={activeTab === 'structure'}
      />
    </div>
  );
}

30 lines847 characters

Testing Integration

Use inspector programmatically in tests:

TSX

import { ThemeValidator } from '@shohojdhara/atomix/theme';

describe('Theme Validation', () => {
  it('should validate theme structure', () => {
    const theme = createTheme({
      palette: { primary: { main: '#7AFFD7' } },
    });

    const validator = new ThemeValidator();
    const result = validator.validate(theme);

    expect(result.valid).toBe(true);
    expect(result.errors).toHaveLength(0);
  });

  it('should detect accessibility issues', () => {
    const theme = createTheme({
      palette: {
        primary: { main: '#FFFF00' }, // Poor contrast
        background: { default: '#FFFFFF' },
      },
    });

    const validator = new ThemeValidator();
    const result = validator.validate(theme);

    expect(result.warnings).toContain(
      expect.objectContaining({
        type: 'accessibility',
        message: expect.stringContaining('contrast'),
      })
    );
  });
});

34 lines903 characters

Storybook Addon

Create a Storybook addon for theme inspection:

TSX

// .storybook/addons/ThemeInspectorAddon.tsx
import { ThemeInspector } from '@shohojdhara/atomix/theme/devtools';
import { useGlobals } from '@storybook/manager-api';

export function ThemeInspectorAddon() {
  const [{ theme }] = useGlobals();

  return (
    <div className="storybook-addon">
      <ThemeInspector
        theme={theme}
        showValidation={true}
        showCSSVariables={true}
      />
    </div>
  );
}

17 lines426 characters

Validation Features

What Gets Validated

Required Properties - Ensures all required theme properties are present
Type Checking - Validates property types and formats
Color Formats - Checks for valid hex, RGB, or HSL colors
Contrast Ratios - Analyzes text/background contrast for WCAG compliance
Font Families - Validates font family declarations
Spacing Values - Ensures valid spacing scale values

Tip: Validation runs once on mount and is memoized for performance. Results are cached until the theme object changes.

Error Levels

Errors (Red)

Critical issues that will prevent the theme from working correctly. Must be fixed before using the theme in production.

Warnings (Yellow)

Non-critical issues that may cause problems or accessibility concerns. Should be reviewed and addressed when possible.

Info (Blue)

Suggestions for improvements or best practices. Optional but recommended.

Best Practices

Use During Development

Always keep ThemeInspector open during theme development to catch issues as you make changes. Enable all inspection features for comprehensive feedback.

Check Accessibility

Pay special attention to accessibility warnings. Ensure all text/background combinations meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text).

Review CSS Variables

Use the CSS variables view to verify that your theme generates the expected custom properties. This helps debug issues with theme application.

Development Only

ThemeInspector is designed for development environments. Remove it from production builds to reduce bundle size and improve performance.

Related Tools

Combine ThemeInspector with other devtools for a complete development workflow:

→ Theme Preview - Test themes with sample components → Theme Comparator - Compare theme versions → Live Editor - Edit themes in real-time ← Back to Devtools Overview

Getting Started

Documentation

Resources

Community

Theme Inspector

Theme Inspector Component

Overview

Key Features

Basic Usage

Simple Inspector

With Custom Styling

Props API

Advanced Examples

Development Dashboard

Testing Integration

Storybook Addon

Validation Features

What Gets Validated

Error Levels

Errors (Red)

Warnings (Yellow)

Info (Blue)

Best Practices

Use During Development

Check Accessibility

Review CSS Variables

Development Only

Related Tools

Theme Inspector

Theme Inspector Component

Overview

Key Features

Basic Usage

Simple Inspector

With Custom Styling

Props API

Advanced Examples

Development Dashboard

Testing Integration

Storybook Addon

Validation Features

What Gets Validated

Error Levels

Errors (Red)

Warnings (Yellow)

Info (Blue)

Best Practices

Use During Development

Check Accessibility

Review CSS Variables

Development Only

Related Tools