Refactor site header, heroes, and design system

components/theme-toggle.tsx

@@ -12,6 +12,7 @@ type ThemeToggleProps = {
   label?: string;
   variant?: ButtonProps["variant"];
   className?: string;
+  iconClassName?: string;
 };
 
 export function ThemeToggle({
@@ -19,6 +20,7 @@ export function ThemeToggle({
   label,
   variant = "outline",
   className,
+  iconClassName,
 }: ThemeToggleProps) {
   const { setTheme, theme, resolvedTheme } = useTheme();
   const [mounted, setMounted] = useState(false);
@@ -36,7 +38,7 @@ export function ThemeToggle({
         aria-label={ariaLabel}
         className={cn(label ? "justify-start" : undefined, className)}
       >
-        <Moon className="h-4 w-4" />
+        <Moon className={cn("h-4 w-4", iconClassName)} />
         {label ? <span>{label}</span> : null}
       </Button>
     );
@@ -54,7 +56,7 @@ export function ThemeToggle({
       aria-label={ariaLabel}
       className={cn(label ? "justify-start" : undefined, className)}
     >
-      {isDark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+      {isDark ? <Sun className={cn("h-4 w-4", iconClassName)} /> : <Moon className={cn("h-4 w-4", iconClassName)} />}
       {label ? <span>{label}</span> : null}
     </Button>
   );