tutorial

How to Add Dark Mode Support When Converting Stitch Designs to React Components

July 18, 2026 google-labs-code/stitch-skills ↗

Dark mode support in Stitch-to-React conversion is achieved by capturing the design with a dark class using snapshot.ts, configuring Tailwind with darkMode: ["class"], and applying dark: variants to every color utility in the generated components.

When converting designs from Stitch to React components in the google-labs-code/stitch-skills repository, implementing dark mode requires specific coordination between the extraction and build pipelines. The process leverages Tailwind's class-based dark mode strategy to ensure visual parity between light and dark themes. By following the source code implementation in the stitch-design and stitch-build plugins, you can generate React components that automatically respond to runtime theme changes.

The Three Pillars of Dark Mode Implementation

The dark mode implementation relies on three coordinated mechanisms within the Stitch toolchain:

1. Capture with the Dark Class

The snapshot.ts script located at plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts supports the --html-class flag to inject the dark class into the <html> element during snapshot capture (lines 50-57). This forces the page to render in its dark theme before extraction, ensuring that dark palette tokens are available in the captured HTML.

2. Tailwind Class Configuration

The shadcn-ui skill expects tailwind.config.js to specify darkMode: ["class"] as documented in plugins/stitch-build/skills/shadcn-ui/resources/setup-guide.md (line 172). This enables Tailwind to process dark: variants only when a parent element contains the dark class, rather than relying on the prefers-color-scheme media query.

3. Comprehensive Dark Variants

The react-components skill mandates that every color utility in generated components includes corresponding dark: variants. According to plugins/stitch-build/skills/react-components/SKILL.md (lines 78-80), the validator will flag any color classes missing dark mode counterparts, ensuring complete theme coverage across the component library.

Step-by-Step Dark Mode Workflow

Follow these seven steps to implement dark mode in your Stitch-to-React conversion:

  1. Snapshot the Design with Dark Class

    Run the snapshot script with the --html-class dark flag to capture the page already rendered in dark mode. This stores the dark palette tokens in the extracted HTML file.

  2. Import the Snapshot

    The react-components skill processes the HTML file through the MCP get_screen flow, extracting embedded Tailwind configuration and color tokens for use in component generation.

  3. Sync Tailwind Configuration

    Update resources/style-guide.json with the extracted tokens from the snapshot during Phase 2 of the skill execution. This ensures the generated components reference the same CSS variables as the original design.

  4. Enable Class-Based Dark Mode

    Modify your project's tailwind.config.js (or the generated configuration) to include darkMode: ["class"]. This setting directs Tailwind to activate dark utilities based on the presence of the dark class on the HTML element.

  5. Generate React Components

    Execute the component generation step using resources/component-template.tsx as the template foundation for your React output.

  6. Apply Dark Mode Variants

    Replace every standard color utility (e.g., bg-primary) with paired dark variants (e.g., bg-primary dark:bg-primary-dark). The skill's validator will flag any missing dark: utilities to ensure compliance with the dark mode rule.

  7. Test the Implementation

    Start your development server and toggle the dark class on the HTML element using document.documentElement.classList.toggle('dark') to verify that all components correctly switch between light and dark palettes.

Configuration Examples and Code Snippets

Implementing dark mode requires specific syntax in your configuration files and components.

Capturing the Dark Mode Snapshot

Use the following command to capture your Stitch design with the dark class applied:

npx tsx snapshot.ts \
  --url http://localhost:5173/dashboard \
  --output .stitch/dashboard.html \
  --html-class dark

Configuring Tailwind for Dark Mode

Update your tailwind.config.js to enable class-based dark mode as required by the Stitch toolchain:

module.exports = {
  darkMode: ["class"],   // Required for Stitch-to-React conversion
  content: ["src/**/*.{tsx,ts,js,jsx}"],
  theme: {
    extend: {
      colors: {
        primary: "var(--color-primary)",
        "primary-dark": "var(--color-primary-dark)",
        // Additional tokens from style-guide.json
      },
    },
  },
};

React Component with Dark Mode Support

Generated components must include dark: prefixes for all color utilities:

export const Card = () => (
  <div className="rounded-lg bg-surface p-4 shadow-sm dark:bg-surface-dark">
    <h2 className="text-primary dark:text-primary-dark">
      Card title
    </h2>
    <p className="text-muted dark:text-muted-dark">
      Supporting text
    </p>
  </div>
);

Runtime Theme Toggle

Add this utility function to enable user-controlled theme switching:

const toggleTheme = () => {
  document.documentElement.classList.toggle("dark");
};

Critical Source Files and Their Roles

Understanding these key files helps troubleshoot dark mode issues:

Summary

  • Capture with dark class: Use snapshot.ts --html-class dark to extract designs already rendered in dark mode.
  • Configure Tailwind: Set darkMode: ["class"] in tailwind.config.js to enable conditional dark utility application.
  • Apply variants universally: Ensure every color class in generated components has a corresponding dark: variant to satisfy the skill validator.
  • Sync style tokens: Update resources/style-guide.json with dark palette values extracted during the snapshot phase.
  • Toggle at runtime: Add the dark class to document.documentElement to switch themes dynamically in the final React application.

Frequently Asked Questions

What Tailwind configuration is required for Stitch dark mode?

The stitch-build toolchain requires darkMode: ["class"] in your tailwind.config.js. This setting, documented in plugins/stitch-build/skills/shadcn-ui/resources/setup-guide.md (line 172), ensures Tailwind only applies dark: utilities when the dark class is present on a parent HTML element, rather than relying on the prefers-color-scheme media query.

How do I capture a dark mode snapshot of my Stitch design?

Run the snapshot script with the --html-class dark flag: npx tsx snapshot.ts --url <your-url> --output .stitch/page.html --html-class dark. This injects the dark class into the HTML element before capture, forcing the page to render with its dark theme tokens as implemented in plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts (lines 50-57).

Do I need to manually add dark: prefixes to every color class?

Yes. According to plugins/stitch-build/skills/react-components/SKILL.md (lines 78-80), the skill mandates that all color utilities in generated components include dark: variants. The built-in validator will flag any color classes missing dark mode counterparts, ensuring complete theme coverage across your React components.

Can I toggle dark mode at runtime in the generated React components?

Absolutely. Since the configuration uses class-based dark mode, you can toggle the theme by adding or removing the dark class from document.documentElement. Use document.documentElement.classList.toggle("dark") to switch themes dynamically, and all Tailwind dark: utilities will respond immediately without requiring page reloads.

Have a question about this repo?

These articles cover the highlights, but your codebase questions are specific. Give your agent direct access to the source. Share this with your agent to get started:

Share the following with your agent to get started:
curl -s "https://instagit.com/install.md"
Works with
Claude Codex Cursor VS Code OpenClaw Any MCP Client

Maintain an open-source project? Get it listed too →