Logo Component

The Logo component provides a flexible way to display your brand identity with automatic dark mode support. It intelligently handles logo variations and ensures optimal display across different color schemes.

Key Features

• Dark Mode Support: Automatically switches between light and dark variants

• Responsive Design: Maintains aspect ratio across screen sizes

• Flexible Sizing: Adapts to container dimensions

• Fallback Handling: Gracefully handles missing dark mode variants

Basic Usage

1
<Logo />

Configuration Options

Dark Mode Support

The component automatically handles dark mode switching, if you want to disable it, you can set the darkMode prop to false then the same image will be used in both themes:

1
<Logo alt="Company Name" />
2

3
<!-- Without dark mode -->
4

5
<Logo darkMode={false} alt="Company Name" />

Logo Setup

1. Place your logo files in src/assets/logos/
   • Light theme: logo.png
   • Dark theme: logo-dark.png

1
src/
2
   └── assets
3
      └── logos
4
         ├── logo.png
5
         └── logo-dark.png

Logo Component Props API

Best Practices

1. Image Preparation

   • Use PNG format for transparency support
   • Maintain consistent dimensions between variants
   • Optimize image files for web use
   • Ensure sufficient contrast in both modes

2. Accessibility

   • Provide meaningful alt text
   • Consider color contrast for linked logos
   • Test navigation with keyboard controls
   • Ensure proper ARIA attributes

3. Responsive Design

   • Test logo appearance at various sizes
   • Verify dark mode transitions
   • Ensure proper scaling behavior
   • Consider mobile viewports

Technical Details

• Uses Astro’s built-in Image component for optimization

• Dynamically imports dark mode variant

• Maintains aspect ratio through object-fit containment

• Gracefully falls back to light variant if dark is unavailable