feat(theme): add dark mode support with system detection and smooth transitions

Mahdirnj · Mahdirnj · commit 399fa2b8fb21 · 2025-10-04T09:29:57.000+03:30
- Implement theme provider with next-themes for system preference detection
- Add theme toggle component with system/light/dark options
- Update globals.css with smooth color transitions respecting reduced motion
- Reorganize style controls UI with theme toggle and reset button
- Document new dark mode features in README
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@ A powerful web application that allows you to select components from the Shadcn
 - **Syntax Highlighting**: Beautiful code display with syntax highlighting
 - **Responsive Design**: Works seamlessly across different screen sizes
 - **Split-Pane Interface**: Efficient workspace with resizable panels
+- **Dark Mode**: System-aware theming with manual override (light/dark/system), smooth transitions, and accessible color palettes
 
 ## Tech Stack
 
@@ -56,15 +57,26 @@ npm run dev
 3. **Preview Changes**: See your customized component in the center panel
 4. **Export Code**: Switch to the Export tab to copy or download the generated code
 
+### Dark Mode & Accessibility
+- The app respects your OS preference using system detection and provides a Theme toggle (System/Light/Dark) in the customization panel.
+- Color palettes use OKLCH variables for better perceptual consistency and maintain WCAG AA contrast (≥ 4.5:1 for body text; ≥ 3:1 for large text).
+- Smooth color transitions are enabled and automatically disabled when users prefer reduced motion.
+
+### Customization UI
+- Style Controls now prioritize Reset and basic tools at the top for quick changes.
+- Advanced options (borders, hover effects, shadows, spacing, alignment) are grouped under an Accordion with clear indicators and animations.
+
 ## Project Structure
 
 ```
 src/
 ├── app/                    # Next.js App Router
 │   ├── layout.tsx         # Root layout
+│   ├── providers.tsx      # Client providers (ThemeProvider)
 │   └── page.tsx           # Home page
 ├── components/
 │   ├── ui/                # shadcn/ui components
+│   │   └── theme-toggle.tsx   # Theme manual override selector
 │   ├── features/          # Feature components
 │   │   ├── component-selector.tsx
 │   │   ├── component-preview.tsx
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -118,6 +118,19 @@
   }
   body {
     @apply bg-background text-foreground;
+    /* Smooth theme transitions while respecting reduced motion */
+    transition: background-color 200ms ease, color 200ms ease;
+  }
+}
+
+/* Global smooth color transitions for common surfaces */
+html, body, .bg-background, .bg-card, .bg-popover {
+  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html, body, .bg-background, .bg-card, .bg-popover {
+    transition: none;
   }
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { Toaster } from "@/components/ui/sonner";
 import "./globals.css";
+import { Providers } from "./providers";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -24,14 +25,16 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning={true}>
       <body
         suppressHydrationWarning={true}
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
-        {/* Global toaster with default settings so keyboard shortcut toasts render without being affected by per-component customizer */}
-        <Toaster />
+        <Providers>
+          {children}
+          {/* Global toaster with default settings so keyboard shortcut toasts render without being affected by per-component customizer */}
+          <Toaster />
+        </Providers>
       </body>
     </html>
   );
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import React from "react";
+
+/**
+ * Client-side providers wrapper.
+ * - Enables next-themes with system preference detection and persistent storage.
+ * - Uses `attribute="class"` so Tailwind/Shadcn `.dark` class toggles CSS variables.
+ */
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      {children}
+    </ThemeProvider>
+  );
+}
diff --git a/src/components/features/component-preview.tsx b/src/components/features/component-preview.tsx
@@ -455,6 +455,7 @@ export function ComponentPreview() {
                 <Toaster 
                   position={(customProps.position as import('sonner').ToasterProps['position']) ?? 'bottom-right'}
                   richColors={Boolean(customProps.richColors)}
+                  duration={typeof customProps.duration === 'number' ? customProps.duration : undefined}
                 />
                 <Button onClick={() => toast.success('Hello World!', { duration: typeof customProps.duration === 'number' ? customProps.duration : 4000 })}>
                   Show Toast
diff --git a/src/components/features/style-controls.tsx b/src/components/features/style-controls.tsx
@@ -4,6 +4,9 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/ui/button';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
 import { useEffect, useMemo, useState } from 'react';
 import { useComponentStore } from '@/stores/component-store';
 
@@ -108,7 +111,7 @@ const alignOptions: Option[] = [
 ];
 
 export function StyleControls() {
-  const { selectedComponent, stylePresetClassName, setStylePresetClassName } = useComponentStore();
+  const { selectedComponent, setStylePresetClassName } = useComponentStore();
 
   const [bgColor, setBgColor] = useState<string>('none');
   const [textColor, setTextColor] = useState<string>('auto');
@@ -168,6 +171,23 @@ export function StyleControls() {
     setStylePresetClassName('');
   }, [selectedComponent, setStylePresetClassName]);
 
+  const resetAll = () => {
+    setBgColor('none');
+    setTextColor('auto');
+    setBorderStyle('none');
+    setBorderColor('default');
+    setPadding('none');
+    setMargin('none');
+    setFontSize('text-sm');
+    setFontWeight('font-medium');
+    setRadius('rounded-md');
+    setHoverEffect('none');
+    setShadow('none');
+    setGap('none');
+    setAlign('text-left');
+    setStylePresetClassName('');
+  };
+
   const renderSelect = (id: string, label: string, value: string, onChange: (val: string) => void, options: Option[]) => {
     return (
       <div className="space-y-2">
@@ -193,26 +213,44 @@ export function StyleControls() {
         <CardDescription>Adjust visual attributes in real time</CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
-        {renderSelect('bg-color', 'Background Color', bgColor, setBgColor, colorOptions)}
-        <Separator className="my-4" />
-        {renderSelect('text-color', 'Text Color', textColor, setTextColor, textColorOptions)}
-        <Separator className="my-4" />
-        {renderSelect('border-style', 'Border Style', borderStyle, setBorderStyle, borderStyleOptions)}
-        {renderSelect('border-color', 'Border Color', borderColor, setBorderColor, borderColorOptions)}
+        {/* Top actions: Theme override and Reset button */}
+        <div className="flex items-center justify-between gap-4">
+          <ThemeToggle />
+          <Button variant="secondary" onClick={resetAll} aria-label="Reset styles">Reset</Button>
+        </div>
         <Separator className="my-4" />
-        {renderSelect('padding', 'Padding', padding, setPadding, paddingOptions)}
-        {renderSelect('margin', 'Margin', margin, setMargin, marginOptions)}
-        <Separator className="my-4" />
-        {renderSelect('font-size', 'Font Size', fontSize, setFontSize, fontSizeOptions)}
-        {renderSelect('font-weight', 'Font Weight', fontWeight, setFontWeight, fontWeightOptions)}
-        <Separator className="my-4" />
-        {renderSelect('radius', 'Border Radius', radius, setRadius, radiusOptions)}
-        <Separator className="my-4" />
-        {renderSelect('hover', 'Hover Effect', hoverEffect, setHoverEffect, hoverEffectOptions)}
-        {renderSelect('shadow', 'Shadow', shadow, setShadow, shadowOptions)}
+
+        {/* Basic tools - prominent section */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {renderSelect('bg-color', 'Background Color', bgColor, setBgColor, colorOptions)}
+          {renderSelect('text-color', 'Text Color', textColor, setTextColor, textColorOptions)}
+          {renderSelect('font-size', 'Font Size', fontSize, setFontSize, fontSizeOptions)}
+          {renderSelect('font-weight', 'Font Weight', fontWeight, setFontWeight, fontWeightOptions)}
+          {renderSelect('radius', 'Border Radius', radius, setRadius, radiusOptions)}
+          {renderSelect('padding', 'Padding', padding, setPadding, paddingOptions)}
+          {renderSelect('margin', 'Margin', margin, setMargin, marginOptions)}
+        </div>
+
         <Separator className="my-4" />
-        {renderSelect('gap', 'Component Spacing', gap, setGap, gapOptions)}
-        {renderSelect('align', 'Alignment', align, setAlign, alignOptions)}
+
+        {/* Advanced options grouped under Accordion */}
+        <Accordion type="single" collapsible>
+          <AccordionItem value="advanced">
+            <AccordionTrigger>
+              <span className="font-medium">Advanced</span>
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {renderSelect('border-style', 'Border Style', borderStyle, setBorderStyle, borderStyleOptions)}
+                {renderSelect('border-color', 'Border Color', borderColor, setBorderColor, borderColorOptions)}
+                {renderSelect('hover', 'Hover Effect', hoverEffect, setHoverEffect, hoverEffectOptions)}
+                {renderSelect('shadow', 'Shadow', shadow, setShadow, shadowOptions)}
+                {renderSelect('gap', 'Component Spacing', gap, setGap, gapOptions)}
+                {renderSelect('align', 'Alignment', align, setAlign, alignOptions)}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </CardContent>
     </Card>
   );
diff --git a/src/components/ui/theme-toggle.tsx b/src/components/ui/theme-toggle.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import React from "react";
+
+/**
+ * ThemeToggle provides a manual override for theme selection.
+ * - Options: system, light, dark
+ * - Persists via next-themes (localStorage) and animates smoothly per globals.css
+ */
+export function ThemeToggle() {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+
+  // Avoid hydration mismatch by rendering a neutral UI until mounted.
+  const [mounted, setMounted] = React.useState(false);
+  const [value, setValue] = React.useState<string | undefined>(undefined);
+  React.useEffect(() => {
+    setMounted(true);
+    setValue(resolvedTheme);
+  }, [resolvedTheme]);
+
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <Label htmlFor="theme-select" className="text-sm">Theme</Label>
+      <Select
+        value={mounted ? value : undefined}
+        onValueChange={(val) => {
+          setValue(val);
+          setTheme(val);
+        }}
+      >
+        <SelectTrigger id="theme-select" className="w-36">
+          {/* Use a stable placeholder before mount to prevent SSR/CSR text mismatch */}
+          <SelectValue placeholder={mounted ? (theme ?? "system") : "Theme"} />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="system">System</SelectItem>
+          <SelectItem value="light">Light</SelectItem>
+          <SelectItem value="dark">Dark</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}

Original file line number	Diff line number	Diff line change
`@@ -118,6 +118,19 @@`
`118`	`118`	`}`
`119`	`119`	`body {`
`120`	`120`	`@apply bg-background text-foreground;`
	`121`	`+ /* Smooth theme transitions while respecting reduced motion */`
	`122`	`+ transition: background-color 200ms ease, color 200ms ease;`
	`123`	`+ }`
	`124`	`+}`
	`125`	`+`
	`126`	`+/* Global smooth color transitions for common surfaces */`
	`127`	`+html, body, .bg-background, .bg-card, .bg-popover {`
	`128`	`+ transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;`
	`129`	`+}`
	`130`	`+`
	`131`	`+@media (prefers-reduced-motion: reduce) {`
	`132`	`+ html, body, .bg-background, .bg-card, .bg-popover {`
	`133`	`+ transition: none;`
`121`	`134`	`}`
`122`	`135`	`}`
`123`	`136`