# How to Add Dark Mode Support When Converting Stitch Designs to React Components
> Learn to add dark mode support when converting Stitch designs to React. Capture designs with a dark class, configure Tailwind, and apply dark variants for seamless dark mode integration.
- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: tutorial
- Published: 2026-07-18
---
**Dark mode support in Stitch-to-React conversion is achieved by capturing the design with a `dark` class using [`snapshot.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/snapshot.ts) script located at [`plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts) supports the `--html-class` flag to inject the `dark` class into the `` 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`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.js) to specify `darkMode: ["class"]` as documented in [`plugins/stitch-build/skills/shadcn-ui/resources/setup-guide.md`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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:
```bash
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`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.js) to enable class-based dark mode as required by the Stitch toolchain:
```javascript
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:
```tsx
export const Card = () => (
Card title
Supporting text
);
```
### Runtime Theme Toggle
Add this utility function to enable user-controlled theme switching:
```tsx
const toggleTheme = () => {
document.documentElement.classList.toggle("dark");
};
```
## Critical Source Files and Their Roles
Understanding these key files helps troubleshoot dark mode issues:
- **[`plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/extract-static-html/scripts/snapshot.ts)** — Handles the `--html-class` flag injection (lines 50-57) to capture pages in dark mode.
- **[`plugins/stitch-build/skills/react-components/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/SKILL.md)** — Documents the mandatory rule requiring `dark:` variants on all color classes (lines 78-80).
- **[`plugins/stitch-build/skills/shadcn-ui/resources/setup-guide.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/shadcn-ui/resources/setup-guide.md)** — Contains the `darkMode: ["class"]` configuration guidance (line 172) for Tailwind setup.
- **[`plugins/stitch-build/skills/react-components/resources/style-guide.json`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-build/skills/react-components/resources/style-guide.json)** — Stores the extracted color tokens including dark palette variants used by generated components.
## 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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/tailwind.config.js). This setting, documented in [`plugins/stitch-build/skills/shadcn-ui/resources/setup-guide.md`](https://github.com/google-labs-code/stitch-skills/blob/main/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 --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`](https://github.com/google-labs-code/stitch-skills/blob/main/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`](https://github.com/google-labs-code/stitch-skills/blob/main/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.