Theme Inspector

概要

The Theme Inspector is an MCP Apps tool designed to provide deep insights into the host application's styling. It runs as a Cloudflare Worker and connects to the host to reveal all injected CSS theme variables, displaying them across semantic color groups, typography scales, and other design tokens. Developers and designers can effortlessly preview how UI components like buttons, cards, and text render with the host's styling, and toggle between light and dark themes to ensure visual consistency and adherence to design systems.

主な機能

• Visualizes semantic CSS theme variables and design tokens (colors, typography, radii, shadows).
• Displays live computed CSS values directly from the host application.
• 0 GitHub stars
• Renders mini-components (alerts, badges, focus rings) styled with specific color group variables.
• Previews full UI components (headings, cards, buttons) reflecting host styling with Japanese text support.
• Includes a light/dark theme toggle for comprehensive visual checks.

ユースケース

• Debugging and validating CSS theme variable application within MCP host environments.
• Previewing UI component rendering in host-defined light and dark themes.
• Auditing a host's styling for adherence to design system specifications.