## Overview Kinetik components are designed for both light and dark modes. This guide covers multiple approaches from simple CSS to full-featured theme management. ## Approach 1: CSS Variables The simplest approach uses CSS variables that change based on a class: ```css /* globals.css */ :root { /* Light mode (default) */ --background: #FFFFFF; --foreground: #000000; --accent: #4F46E5; --accent-hover: #4338CA; --accent-foreground: #FFFFFF; --muted: #F5F5F5; --muted-foreground: #737373; --border: #E5E5E5; --surface: #FFFFFF; } .dark { /* Dark mode overrides */ --background: #0A0A0A; --foreground: #FAFAFA; --accent: #818CF8; --accent-hover: #6366F1; --accent-foreground: #FFFFFF; --muted: #262626; --muted-foreground: #A3A3A3; --border: #333333; --surface: #171717; } ``` Toggle by adding/removing the `dark` class on ``: ```tsx document.documentElement.classList.toggle('dark') ``` ## Approach 2: Tailwind Dark Mode ### Configuration Enable class-based dark mode in `tailwind.config.js`: ```js /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: 'class', theme: { extend: { colors: { background: 'var(--background)', foreground: 'var(--foreground)', // ... other CSS variable mappings }, }, }, } ``` ### Using Dark Variants Add dark mode styles with the `dark:` prefix: ```tsx

Heading

Paragraph

Inverted in dark mode ``` ## Approach 3: next-themes (Recommended) For production apps, use `next-themes` for robust theme management with SSR support and system preference detection. ### Installation ```bash npm install next-themes ``` ### Setup Provider ```tsx // app/providers.tsx 'use client' import { ThemeProvider } from 'next-themes' import { ReactNode } from 'react' export function Providers({ children }: { children: ReactNode }) { return ( {children} ) } ``` ```tsx // app/layout.tsx import { Providers } from './providers' export default function RootLayout({ children }) { return ( {children} ) } ``` Always add `suppressHydrationWarning` to the `html` tag to prevent hydration mismatch warnings. ### Theme Toggle Component ```tsx 'use client' import { useTheme } from 'next-themes' import { useEffect, useState } from 'react' import { motion } from 'framer-motion' export function ThemeToggle() { const { theme, setTheme, resolvedTheme } = useTheme() const [mounted, setMounted] = useState(false) // Avoid hydration mismatch useEffect(() => setMounted(true), []) if (!mounted) { return

// Placeholder } const isDark = resolvedTheme === 'dark' return ( setTheme(isDark ? 'light' : 'dark')} className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800" whileTap={{ scale: 0.95 }} aria-label={`Switch to ${isDark ? 'light' : 'dark'} mode`} > {isDark ? ( // Sun icon ) : ( // Moon icon )} ) } ``` ### Theme Selector (Multiple Options) ```tsx 'use client' import { useTheme } from 'next-themes' import { useEffect, useState } from 'react' export function ThemeSelector() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => setMounted(true), []) if (!mounted) return null return ( ) } ``` ## Complete Dark Mode CSS Variables Here's a comprehensive set of dark mode variables: ```css :root { /* Colors */ --background: #FFFFFF; --foreground: #0A0A0A; --accent: #4F46E5; --accent-hover: #4338CA; --accent-light: #EEF2FF; --accent-foreground: #FFFFFF; /* Surfaces */ --surface: #FFFFFF; --surface-hover: #F5F5F5; --muted: #F5F5F5; --muted-foreground: #737373; /* Borders */ --border: #E5E5E5; --border-hover: #D4D4D4; /* Semantic */ --success: #10B981; --warning: #F59E0B; --error: #EF4444; /* Shadows */ --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); } .dark { /* Colors */ --background: #0A0A0A; --foreground: #FAFAFA; --accent: #818CF8; --accent-hover: #A5B4FC; --accent-light: #1E1B4B; --accent-foreground: #FFFFFF; /* Surfaces */ --surface: #171717; --surface-hover: #262626; --muted: #262626; --muted-foreground: #A3A3A3; /* Borders */ --border: #333333; --border-hover: #404040; /* Semantic (slightly lighter for dark backgrounds) */ --success: #34D399; --warning: #FBBF24; --error: #F87171; /* Shadows (more subtle in dark mode) */ --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4); } ``` ## Handling Images and Media Images may need different versions for dark mode: ```tsx 'use client' import { useTheme } from 'next-themes' import Image from 'next/image' export function Logo() { const { resolvedTheme } = useTheme() const [mounted, setMounted] = useState(false) useEffect(() => setMounted(true), []) if (!mounted) return null return ( Logo

) } ``` Or use CSS to swap: ```tsx <>

``` ## Animation Considerations Some animations may need adjustment for dark mode: ```tsx Card content ``` ## Persisting Theme Preference `next-themes` automatically persists the theme choice in localStorage. For custom implementations: ```tsx 'use client' import { useEffect, useState } from 'react' function useTheme() { const [theme, setThemeState] = useState<'light' | 'dark'>('light') useEffect(() => { // Load from localStorage const stored = localStorage.getItem('theme') as 'light' | 'dark' | null const systemPreference = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' const initialTheme = stored || systemPreference setThemeState(initialTheme) document.documentElement.classList.toggle('dark', initialTheme === 'dark') }, []) const setTheme = (newTheme: 'light' | 'dark') => { setThemeState(newTheme) localStorage.setItem('theme', newTheme) document.documentElement.classList.toggle('dark', newTheme === 'dark') } return { theme, setTheme } } ``` ## Testing Dark Mode ### Browser DevTools 1. Open Chrome DevTools 2. Press Cmd/Ctrl + Shift + P 3. Type "Rendering" 4. Find "Emulate CSS media feature prefers-color-scheme" 5. Select "dark" or "light" ### Automated Tests ```tsx import { render } from '@testing-library/react' describe('Component in dark mode', () => { beforeEach(() => { document.documentElement.classList.add('dark') }) afterEach(() => { document.documentElement.classList.remove('dark') }) it('renders correctly in dark mode', () => { render() // assertions }) }) ``` ## Next Steps - Explore [CSS Variables](/docs/customization/css-variables) reference - Learn about [Theming](/docs/customization/theming) strategies - Check out the [Theme Customizer](/customize) to preview dark mode