Theme Inspector

A Flutter package that provides an interactive inspector for visualizing and debugging your app's themes, including Material and Cupertino widgets, color schemes, and text styles.

Demo

Requirements

Version 2.x requires package:material_ui and package:cupertino_ui. As of Flutter 3.44 the Material and Cupertino libraries inside the SDK are frozen, and they are being replaced by these standalone packages. The inspector reads your theme from them, so your app must use them too.

If your app still imports package:flutter/material.dart, you have two options:

  • Migrate your app (recommended β€” the SDK libraries are deprecated in the November 2026 stable release):

    dart fix --apply --code=migrate_design_widgets

  • Stay on theme_inspector: ^1.1.0, which reads the theme from package:flutter/material.dart.

Opening the inspector from an app that has not migrated shows an explanatory screen rather than another app's theme. Requires Flutter 3.44 / Dart 3.12 or newer.

Features

✨ Visual Theme Inspection - View all Material and Cupertino widgets with your current theme applied
🎨 Color Scheme Explorer - Each color role paired with its on-color, with its WCAG contrast ratio and grade
πŸ” Where Used - Select a color or text style to see the built-in widgets that use it by default, next to a live preview of those widgets
πŸ“ Text Theme Preview - See all text styles, grouped by role, with size and weight information
πŸ“± Responsive Layout - A navigation rail on wide screens, a bottom navigation bar on phones
πŸ”§ Fully Customizable - Add custom colors, text styles, widgets, and entire tabs
πŸ“‹ Copy to Clipboard - Easily copy color codes and text style information
πŸŽ›οΈ Toggle Tabs - Enable or disable built-in tabs as needed

Quick Start

Import the package and open the inspector:

import 'package:material_ui/material_ui.dart';
import 'package:theme_inspector/theme_inspector.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Theme Inspector Demo')),
        body: Center(
          child: ElevatedButton(
            onPressed: () => ThemeInspector.open(context),
            child: const Text('Open Theme Inspector'),
          ),
        ),
      ),
    );
  }
}

Usage

Basic Usage

Simply call ThemeInspector.open(context) to display the inspector with all default tabs:

ElevatedButton(
  onPressed: () => ThemeInspector.open(context),
  child: const Text('Open Theme Inspector'),
)

This will open a page with four default tabs:

  • Color Scheme - ColorScheme roles paired with their on-colors, with contrast ratios and copy-to-clipboard
  • Material - Material widgets (buttons, text fields, cards, etc.)
  • Cupertino - iOS-style Cupertino widgets
  • Text Theme - All TextTheme styles with size and weight information

Selecting a color or text style shows which built-in widgets use it by default, next to a live preview of those widgets. On wide screens this is a side panel; on phones it opens as a bottom sheet.

Adding Custom Colors

Display your custom color palette alongside the default ColorScheme:

Color Scheme Tab

import 'package:theme_inspector/theme_inspector.dart';

ThemeInspector.open(
  context,
  additionalColors: [
    ColorSection(
      title: "My custom colors",
      colors: [
        ColorInfo(
          name: 'Custom Color 1',
          color: const Color(0xFF0057B7),
          textColor: Colors.white,
          textColorName: 'white', // Optional: labels the text color
        ),
        ColorInfo(
          name: 'Custom Color 2',
          color: const Color(0xFFFFDD00),
          textColor: Colors.black,
        ),
      ],
    ),
  ],
);

Adding Custom Text Styles

Show your custom typography alongside the default TextTheme:

Text Theme Tab

ThemeInspector.open(
  context,
  additionalTextStyles: [
    TextStyleInfo(
      'My Custom Style 1',
      const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
        color: Color(0xFF0057B7),
      ),
    ),
    TextStyleInfo(
      'My Custom Style 2',
      const TextStyle(
        fontSize: 16,
        fontStyle: FontStyle.italic,
        color: Color(0xFF9D2235),
      ),
    ),
  ],
);

Adding Custom Widgets to Material Tab

Display your custom Material widgets to see how they look with the current theme:

Material Widgets Tab

final gradientButton = Container(
  height: 44.0,
  decoration: BoxDecoration(
    gradient: const LinearGradient(
      colors: [Color(0xFF0057B7), Color(0xFFFFDD00)],
    ),
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: ElevatedButton(
    onPressed: () {},
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.transparent,
      shadowColor: Colors.transparent,
    ),
    child: const Text(
      'My Custom Button',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

ThemeInspector.open(
  context,
  additionalMaterialWidgets: [
    SectionWrapper(
      title: 'My Custom Widget for Material Tab',
      child: gradientButton,
    ),
  ],
);

Adding Custom Widgets to Cupertino Tab

Display your custom Cupertino widgets:

Cupertino Widgets Tab

ThemeInspector.open(
  context,
  additionalCupertinoWidgets: [
    SectionWrapper(
      title: 'My Custom Widget for Cupertino Tab',
      child: gradientButton,
    ),
  ],
);

Creating Custom Tabs

Add completely custom tabs with your own content:

Custom Tabs Example

ThemeInspector.open(
  context,
  customTabs: [
    InspectorTab(
      title: 'My Custom Tab',
      shortTitle: 'Custom', // Optional: fits a phone's bottom navigation bar
      icon: Icons.catching_pokemon,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          'This is a custom tab added to the Theme Inspector. You can add any content here.',
          style: Theme.of(context).textTheme.bodyLarge,
        ),
      ),
    ),
  ],
);

Disabling Default Tabs

You can disable any of the built-in tabs:

ThemeInspector.open(
  context,
  materialEnabled: false,      // Disable Material tab
  cupertinoEnabled: false,     // Disable Cupertino tab
  colorSchemeEnabled: true,    // Keep Color Scheme tab
  textThemeEnabled: true,      // Keep Text Theme tab
);

API Reference

ColorSection

Represents a group of related colors.

ColorSection({
  required String title,
  required List<ColorInfo> colors,
})

ColorInfo

Represents information about a single color.

ColorInfo({
  required String name,
  required Color color,
  Color? textColor,        // Optional contrast color for text display
  String? textColorName,   // Optional name for textColor, e.g. 'onBrand'
})

The tile shows the contrast ratio between color and textColor (or black or white, whichever contrasts more, when textColor is omitted)


### TextStyleInfo

Represents information about a text style.

```dart
TextStyleInfo(
  String name,
  TextStyle? style,
)

SectionWrapper

A wrapper widget for consistent section formatting.

SectionWrapper({
  required String title,
  required Widget child,
})

InspectorTab

Represents a custom tab in the inspector.

InspectorTab({
  required String title,
  required IconData icon,
  required Widget child,
  String? shortTitle,  // Optional label for the navigation rail and bottom bar
})

A phone gives each bottom navigation destination about 78 dp, so a long title wraps there; shortTitle avoids that. With more than five tabs, phones fall back to a scrollable tab bar.

Agent Skill

The package ships an agent skill at skills/theme_inspector/SKILL.md for use with coding agents that support skills, such as Claude Code. It teaches the agent when to reach for the inspector β€” building a new app, changing themes, fonts or colors, or adding a custom widget β€” and how to extend it with your own colors, text styles, widgets and tabs.

To use it, copy the skill into your project's skills directory:

cp -r path/to/theme_inspector/skills/theme_inspector .claude/skills/

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

Libraries

theme_inspector
An interactive inspector for visualizing and debugging a Flutter app's theme.