Side-by-side theme comparison with difference highlighting

Theme Comparator

Compare two themes to identify differences, track changes, and ensure consistency across theme versions.

Theme Comparator Component

ThemeComparator provides detailed side-by-side comparison of two themes with difference highlighting, statistics, and filtering capabilities.

Overview

The ThemeComparator component analyzes two themes and displays their differences in an easy-to-understand format. It's essential for version control, A/B testing, and ensuring theme consistency.

✨ Try it now: Interactive Comparator Example — Compare two theme versions side-by-side.

Key Features

Side-by-Side Comparison - View both themes simultaneously
Difference Highlighting - Visual indicators for added, removed, and changed values
Statistics Dashboard - Summary of changes and differences
Detailed Value Comparison - Deep comparison of all theme properties
Path-Based Tracking - Track changes by property path
Filter Options - Show only differences or all properties

Basic Usage

Simple Comparison

TSX

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

const lightTheme = createTheme({
  name: 'Light Theme',
  palette: {
    primary: { main: '#2196f3' },
    background: { default: '#ffffff' },
  },
});

const darkTheme = createTheme({
  name: 'Dark Theme',
  palette: {
    primary: { main: '#90caf9' },
    background: { default: '#121212' },
  },
});

function App() {
  return (
    <ThemeComparator
      themeA={lightTheme}
      themeB={darkTheme}
      showOnlyDifferences={false}
    />
  );
}

28 lines579 characters

Show Only Differences

TSX

<ThemeComparator
  themeA={currentVersion}
  themeB={newVersion}
  showOnlyDifferences={true}
/>

5 lines96 characters

Props API

Prop	Type	Default	Description
`themeA`	`Theme`	Required	First theme to compare
`themeB`	`Theme`	Required	Second theme to compare
`showOnlyDifferences`	`boolean`	`false`	Show only properties that differ
`className`	`string`	-	Custom CSS class name
`style`	`CSSProperties`	-	Inline styles object

Difference Types

Visual Indicators

AddedProperty exists in Theme B but not in Theme A

RemovedProperty exists in Theme A but not in Theme B

ChangedProperty exists in both but with different values

Statistics Dashboard

The comparator displays summary statistics:

Total number of properties compared
Number of added properties
Number of removed properties
Number of changed properties
Number of unchanged properties
Percentage of differences

Advanced Examples

Version Comparison Tool

Compare theme versions before releasing updates:

TSX

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

function VersionComparison() {
  const [showOnlyDiffs, setShowOnlyDiffs] = useState(true);
  
  return (
    <div>
      <div className="controls">
        <h2>Theme v1.0 vs v2.0</h2>
        <label>
          <input
            type="checkbox"
            checked={showOnlyDiffs}
            onChange={(e) => setShowOnlyDiffs(e.target.checked)}
          />
          Show only differences
        </label>
      </div>

      <ThemeComparator
        themeA={themeV1}
        themeB={themeV2}
        showOnlyDifferences={showOnlyDiffs}
      />

      <div className="release-notes">
        <h3>Breaking Changes</h3>
        <p>Review removed or significantly changed properties</p>
      </div>
    </div>
  );
}

33 lines822 characters

A/B Testing Dashboard

Compare theme variants for A/B testing:

TSX

function ABTestingDashboard() {
  const variantA = createTheme({
    name: 'Variant A',
    palette: { primary: { main: '#2196f3' } },
  });

  const variantB = createTheme({
    name: 'Variant B',
    palette: { primary: { main: '#f44336' } },
  });

  return (
    <div className="ab-testing">
      <h2>A/B Test: Primary Color Impact</h2>
      
      <ThemeComparator
        themeA={variantA}
        themeB={variantB}
        showOnlyDifferences={true}
      />

      <div className="test-results">
        <h3>Test Metrics</h3>
        <p>Track conversion rates for each variant</p>
      </div>
    </div>
  );
}

28 lines621 characters

Migration Helper

Compare old and new theme structures during migration:

TSX

function MigrationHelper() {
  return (
    <div className="migration-tool">
      <h2>Migration from v1 to v2</h2>
      
      <ThemeComparator
        themeA={legacyTheme}
        themeB={modernTheme}
        showOnlyDifferences={true}
      />

      <div className="migration-guide">
        <h3>Migration Steps</h3>
        <ol>
          <li>Review removed properties (marked in red)</li>
          <li>Update changed property values</li>
          <li>Add new required properties (marked in green)</li>
        </ol>
      </div>
    </div>
  );
}

22 lines555 characters

Common Use Cases

1. Version Control

Track theme changes across versions:

Compare current version with previous releases
Identify breaking changes before deployment
Generate changelog from differences

2. Theme Variants

Compare different theme variants:

Light vs Dark mode differences
Brand theme variations
Seasonal or promotional themes

3. Quality Assurance

Ensure theme consistency:

Verify expected changes were applied
Catch unintended modifications
Validate theme structure compliance

Best Practices

Compare Before Releasing

Always compare theme versions before releasing updates. This helps identify breaking changes and ensures you document all modifications.

Use Filters Effectively

Enable "show only differences" when reviewing large themes to focus on what changed. Disable it to see the full context of unchanged properties.

Document Breaking Changes

Pay special attention to removed properties (marked in red). These are breaking changes that require migration steps in your documentation.

Performance Note

Differences are calculated once on mount and memoized. Even large themes compare efficiently without performance impact.

Related Tools

Combine ThemeComparator with other devtools:

→ Theme Inspector - Validate both themes → Theme Preview - Preview both themes → CLI Tool - Compare themes from command line ← Back to Devtools Overview

Side-by-side theme comparison with difference highlighting

Theme Comparator

Compare two themes to identify differences, track changes, and ensure consistency across theme versions.