prompt template
Add dark mode support to my Next.js app that uses Tailwind CSS. Current setup: - Next.js App Router with TypeScript - Tailwind CSS for styling - No existing theme system Implement the following: 1. **Theme provider** using React context that: - Defaults to system preference (prefers-color-scheme) - Allows manual toggle (light / dark / system) - Persists choice in localStorage - Avoids flash of wrong theme on page load (use a script in <head>) 2. **Toggle component** — a clean button/switch for the navbar 3. **CSS strategy** — show how to define color tokens that swap between themes using Tailwind's dark: variant or CSS variables 4. **Migration checklist** — list the steps to convert existing components (what to search for, what to replace) Provide the complete implementation files. Use no external theme libraries.
How to Use This Prompt
- 1Copy the prompt template above
- 2Paste into Claude, ChatGPT, or Cursor
- 3Replace [bracketed placeholders] with your specific project details
- 4Iterate on the AI output to refine and customize the results
More Frontend Prompts
Related frontend templates from the vault
🎨
Responsive Landing Page Builder
Generate a complete, conversion-optimized landing page
Intermediatelanding-pagenext.js
🎨
React Component from Sketch Description
Turn a natural-language UI description into a polished React component
Beginnerreacttailwind
🎨
Vibe-to-Code: App from Vibes
Describe an app idea in casual language and get a working prototype
Beginnervibe-codingprototyping
🎨
Infinite Scroll with Virtualization
Use this prompt to infinite scroll with virtualization with AI assistance
Beginnerreactinfinite-scroll
You Might Also Like
Prompts from other categories that share similar tags
⚙️
Backend
REST API Endpoint Generator
Generate a complete CRUD API endpoint with validation and error handling
Shared:next.js
⚡
Performance
Next.js Performance Optimization
Optimize a Next.js application for Core Web Vitals and loading speed
Shared:next.js
🔒
SecurityPRO
Content Security Policy Builder
Generate a strict Content Security Policy for your web application
Shared:next.js
🔒
SecurityPRO
OAuth 2.0 Social Login Integration
Implement OAuth 2.0 social login with multiple providers
Shared:next.js
Keep Exploring the Vault