---
description: Add dark mode support using next-themes
---
1. **Install next-themes**:
- Install the library.
// turbo
- Run
2. **Add Provider**:
- Wrap your app in
3. **Configure Tailwind**:
- Ensure
4. **Create Toggle Button**:
- Build a theme switcher component.
5. **Pro Tips**:
- Use
- The
description: Add dark mode support using next-themes
---
1. **Install next-themes**:
- Install the library.
// turbo
- Run
npm install next-themes2. **Add Provider**:
- Wrap your app in
app/layout.tsx.import { ThemeProvider } from 'next-themes';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
</ThemeProvider>
</body>
</html>
);
}3. **Configure Tailwind**:
- Ensure
darkMode: 'class' is in tailwind.config.ts.export default {
darkMode: 'class',
// ... rest of config
}4. **Create Toggle Button**:
- Build a theme switcher component.
'use client'
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
export function ThemeToggle() {
const [mounted, setMounted] = useState(false);
const { theme, setTheme } = useTheme();
useEffect(() => setMounted(true), []);
if (!mounted) return null;
return (
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
{theme === 'dark' ? '🌞' : '🌙'}
</button>
);
}5. **Pro Tips**:
- Use
suppressHydrationWarning on the <html> tag to prevent hydration warnings.- The
useEffect check ensures the component only renders after hydration.By Antigravity Team
How to Use This Workflow
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/workflows/ - Save the file as
implement-dark-mode-next-themes-tailwind.md - In Antigravity, type
/implement_dark_mode_next_themes_tailwindor just describe what you want to do
Related Workflows
Scaffold New Component
ReactProductivityScaffolding
--- description: Quickly generate a new React component structure --- 1. **Create Directory**: - Create a folder for the component. // turbo - Run `mkdir -p src/components/NewComponent` 2. **Create Component File**: - Create the main file with boilerplate code. // turbo - Run `pr...
Setup Internationalization (i18n)
i18nNext.jsLocalization
--- description: Configure next-intl for multi-language support --- 1. **Install next-intl**: - Install the library. // turbo - Run `npm install next-intl` 2. **Create Messages**: - Create `messages/en.json` and `messages/es.json`. ```json { "Index": { "title": "Hello...
Handle File Uploads (S3)
AWSS3Uploads
--- description: Setup secure file uploads to AWS S3 --- 1. **Install AWS SDK**: - Install the S3 client and presigner. // turbo - Run `npm install @aws-sdk/client-s3 @aws-sdk/s3-request-presigner` 2. **Create Presigned URL (Server Action)**: - Generate a presigned URL on the server fo...
Recommended Rules
View more rules →Mobile UI/UX Best Practices
UI/UXMobileDesign
You are an expert in Mobile UI/UX design and implementation. Key Principles: - Design for touch (fingers are not cursors) - Content first, chrome sec...
Tailwind CSS Expert
Tailwind CSSCSSStyling
You are an expert in Tailwind CSS utility-first styling. Key Principles: - Utility-first workflow - Design directly in markup - Consistency via confi...
Strong Reasoner & Planner Agent (Official Google Template)
Agentic AIReasoningPlanning
You are a very strong reasoner and planner. Use these critical instructions to structure your plans, thoughts, and responses. 📋 Source: Google Gemin...
