feat: implement consistent dark/light/system theme across entire application
- Enable smooth theme transitions with disableTransitionOnChange={false}
- Add persistent theme storage with design-buddy-theme key
- Update layout with proper body styling (bg-background text-foreground)
- Apply consistent theming to header using bg-background tokens
- Update footer to use bg-muted/50 for better visual hierarchy
- Standardize landing page sections with consistent theme tokens
- Update design studio loading overlay to use bg-card with border
- Replace hardcoded dark:bg-* classes with semantic theme tokens
- Ensure all components adapt to light, dark, and system themes
- Add proper background and foreground colors throughout the app
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Rosario Moscato
@@ -179,7 +179,7 @@ export default function DesignStudioPage() {
|
||||
{/* Loading Overlay */}
|
||||
{isGenerating && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg p-8 shadow-xl max-w-sm mx-4">
|
||||
<div className="bg-card rounded-lg p-8 shadow-xl max-w-sm mx-4 border">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="relative">
|
||||
<Loader2 className="w-12 h-12 text-blue-600 animate-spin" />
|
||||
|
||||
@@ -29,13 +29,14 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
|
||||
>
|
||||
<ThemeProvider
|
||||
attribute="class"
|
||||
defaultTheme="system"
|
||||
enableSystem
|
||||
disableTransitionOnChange
|
||||
disableTransitionOnChange={false}
|
||||
storageKey="design-buddy-theme"
|
||||
>
|
||||
<SiteHeader />
|
||||
{children}
|
||||
|
||||
@@ -11,7 +11,7 @@ export default function LandingPage() {
|
||||
return (
|
||||
<main className="flex-1">
|
||||
{/* Hero Section */}
|
||||
<section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||
<section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-background to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||
<div className="container mx-auto px-4 py-20">
|
||||
<div className="max-w-6xl mx-auto text-center space-y-8">
|
||||
<div className="space-y-6">
|
||||
@@ -62,7 +62,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-20 bg-white dark:bg-gray-900">
|
||||
<section className="py-20 bg-background">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
@@ -108,7 +108,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* Room Types Section */}
|
||||
<section className="py-20 bg-gray-50 dark:bg-gray-800">
|
||||
<section className="py-20 bg-muted/50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
@@ -129,7 +129,7 @@ export default function LandingPage() {
|
||||
{ name: "Nursery", icon: "👶" },
|
||||
{ name: "Outdoor", icon: "🌳" },
|
||||
].map((room) => (
|
||||
<div key={room.name} className="text-center p-6 rounded-lg bg-white dark:bg-gray-900 shadow-sm hover:shadow-md transition-shadow">
|
||||
<div key={room.name} className="text-center p-6 rounded-lg bg-card shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="text-4xl mb-2">{room.icon}</div>
|
||||
<h3 className="font-medium">{room.name}</h3>
|
||||
</div>
|
||||
@@ -140,7 +140,7 @@ export default function LandingPage() {
|
||||
</section>
|
||||
|
||||
{/* Design Styles Section */}
|
||||
<section className="py-20 bg-white dark:bg-gray-900">
|
||||
<section className="py-20 bg-background">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
|
||||
@@ -2,7 +2,7 @@ import { Palette } from "lucide-react";
|
||||
|
||||
export function SiteFooter() {
|
||||
return (
|
||||
<footer className="border-t bg-gray-50 dark:bg-gray-900 py-8">
|
||||
<footer className="border-t bg-muted/50 py-8">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Palette } from "lucide-react";
|
||||
|
||||
export function SiteHeader() {
|
||||
return (
|
||||
<header className="border-b bg-white/95 dark:bg-gray-900/95 backdrop-blur supports-[backdrop-filter]:bg-white/60">
|
||||
<header className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
||||
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold">
|
||||
<Link
|
||||
|
||||
Reference in New Issue
Block a user