From db0c55504173a656bc42e6a4d752fa58f9496882 Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@shootify.io>
Date: Thu, 20 Nov 2025 15:16:49 +0100
Subject: [PATCH] Add ThemeToggle to Header component

- Integrated `ThemeToggle` for light/dark mode functionality in both desktop and mobile views.
- Adjusted layout styles to accommodate new control next to `LocaleSwitcher` with consistent spacing.
---
 frontend/src/components/home/Header.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/home/Header.tsx b/frontend/src/components/home/Header.tsx
index ce8a8d4..c07b321 100644
--- a/frontend/src/components/home/Header.tsx
+++ b/frontend/src/components/home/Header.tsx
@@ -11,6 +11,7 @@ import { Menu, X, Github, Star } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { LocaleSwitcher } from '@/components/i18n';
+import { ThemeToggle } from '@/components/theme';
 
 interface HeaderProps {
   onOpenDemoModal: () => void;
@@ -67,6 +68,9 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
             {/* Locale Switcher */}
             <LocaleSwitcher />
 
+            {/* Theme Toggle */}
+            <ThemeToggle />
+
             {/* CTAs */}
             <Button onClick={onOpenDemoModal} variant="default" size="sm">
               Try Demo
@@ -118,9 +122,10 @@ export function Header({ onOpenDemoModal }: HeaderProps) {
                 </a>
 
                 <div className="border-t pt-4 mt-4 space-y-3">
-                  {/* Locale Switcher */}
-                  <div className="flex justify-center">
+                  {/* Locale Switcher & Theme Toggle */}
+                  <div className="flex justify-center gap-4">
                     <LocaleSwitcher />
+                    <ThemeToggle />
                   </div>
 
                   <Button