HomeOnTour LogoUI

Theming

Customize the look and feel of components

CSS Variables

Components use CSS variables for theming. This makes it easy to change colors across your entire application.

Color Scheme
Define your color scheme in globals.css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    
    --radius: 0.5rem;
  }
}

Dark Mode

Add dark mode support by defining a .dark class with different colors:

Dark Mode Colors
Override colors for dark mode
@layer base {
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

Custom Styles

All components accept a className prop for custom styling:

Extending Components
Add custom classes to any component
import { LogoSvg } from '@/components/homeontour-ui/logo-svg'

// Add custom classes
<LogoSvg className="h-16 drop-shadow-xl hover:drop-shadow-2xl">
  Custom Logo
</LogoSvg>

// Custom colors and styles
<LogoSvg 
  signatureColor="#FF6B6B" 
  textColor="#4ECDC4"
  className="h-12 transition-transform hover:scale-110"
/>

Modifying Components

Since you own the code, you can modify components directly:

Adding New Variants
Example: Add a new button variant
// components/homeontour-ui/logo-svg.tsx

export const LogoSvg = React.forwardRef<SVGSVGElement, LogoSvgProps>(
  ({ 
    className, 
    // Change default colors for your brand
    signatureColor = "#FF6B6B",  // Your brand primary
    textColor = "#4ECDC4",        // Your brand secondary
    ...props 
  }, ref) => {
    return (
      <svg ref={ref} className={cn("w-auto", className)} {...props}>
        {/* SVG content */}
      </svg>
    )
  }
)

// Use it
<LogoSvg className="h-10" />  // Uses your custom defaults