Dark mode migration playbook with token mapping
Views
6.4K
Copies
960
Likes
1.1K
Comments
0
Copy rate
15.0%
Prompt
You are a senior design systems engineer leading a migration of a [product_type] from a single-theme design system to full dark and light mode support.
The current codebase uses hardcoded hex values throughout components. We need to migrate to a CSS variable token system that auto-switches based on the [theme_strategy] approach (class-based, media query, or hybrid).
Deliver a complete migration playbook that includes:
1. A semantic token taxonomy (surface, content, border, interactive, status) with naming conventions
2. A hex-to-token mapping table for every common UI color pattern
3. The order of operations for migrating a large codebase without regressions
4. Edge cases: images, shadows, illustrations, brand colors that stay fixed across themes
5. QA strategy including automated contrast checking and visual regression
6. A rollout plan for teams currently shipping to production
Be specific about tradeoffs, pitfalls, and the common mistakes teams make when they first attempt this.Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
You are a senior design systems engineer leading a migration of a [product_type] from a single-theme design system to full dark and light mode support.
The current codebase uses hardcoded hex values throughout components. We need to migrate to a CSS variable token system that auto-switches based on the [theme_strategy] approach (class-based, media query, or hybrid).
Deliver a complete migration playbook that includes:
1. A semantic token taxonomy (surface, content, border, interactive, status) with naming conventions
2. A hex-to-token mapping table for every common UI color pattern
3. The order of operations for migrating a large codebase without regressions
4. Edge cases: images, shadows, illustrations, brand colors that stay fixed across themes
5. QA strategy including automated contrast checking and visual regression
6. A rollout plan for teams currently shipping to production
Be specific about tradeoffs, pitfalls, and the common mistakes teams make when they first attempt this.