Introducing Olivero Hugo Theme: Drupal's Award-Winning Design for Hugo

The Hugo community has a stunning new addition that brings one of the most acclaimed web designs to the static site world. I’m excited to introduce the Olivero Hugo Theme - a complete 1:1 replication of Drupal’s award-winning Olivero theme, meticulously crafted for Hugo’s static site generator.

Born from Drupal’s default theme that revolutionized accessibility and modern web design, this Hugo version maintains every pixel-perfect detail while leveraging Hugo’s blazing-fast performance. Whether you’re building a personal blog, corporate site, or documentation portal, Olivero delivers professional aesthetics with enterprise-grade accessibility standards.

The Olivero theme represents a significant milestone in web design, combining contemporary aesthetics with uncompromising accessibility. Its vibrant blue accent color (#0055f4) set against clean neutral backgrounds creates a visual hierarchy that guides users naturally through your content. The typography system features Lora for comfortable reading and Metropolis for striking headlines, ensuring your message is both beautiful and readable.

Design System & Features

The Olivero Hugo Theme inherits the sophisticated design system that made the original Drupal theme so successful:

Signature Visual Elements:

• Vivid primary blue (#0055f4) with carefully chosen neutral grays
• 18px base font size with Lora serif for body text
• Metropolis sans-serif for distinctive headings
• Consistent spacing using CSS custom properties
• Modern CSS Grid-based responsive layouts
• Secondary navigation top bar with user actions

Mobile-First Responsive Design:

• Intelligent header that hides/shows based on scroll direction
• Smooth slide-out mobile navigation with hamburger toggle
• Multi-level desktop dropdown menus with keyboard support
• Tablet-optimized layouts at 768px breakpoint
• Touch-friendly controls with 52px minimum touch targets

Accessibility First Approach

What truly sets Olivero apart is its unwavering commitment to accessibility:

WCAG 2.1 AA Compliant Features:

• Semantic HTML5 structure with proper heading hierarchy
• Comprehensive ARIA attributes and landmark roles
• Visible focus indicators and skip links
• Proper tab order and keyboard navigation support
• Complete right-to-left (RTL) language support
• Screen reader optimizations with descriptive labels

Performance & SEO Optimizations:

• Minimal JavaScript for essential interactions only
• Efficient CSS with custom properties for maintainability
• Open Graph meta tags and Twitter Cards integration
• Structured data for enhanced search engine understanding
• Hugo’s static site generation for lightning-fast loading
• Asset minification and fingerprinting
• Lazy loading for images
• Font preloading for optimal typography rendering
• Gzip compression support

Getting Started

Installing and using the Olivero Hugo Theme is straightforward:

1. Clone the repository:

   git clone https://github.com/ValPaliy/olivero-hugo.git
   cd olivero-hugo
   

2. Start development:

   hugo server --buildDrafts
   

3. Visit your site at http://localhost:1313 to see Olivero in action

Requirements:

• Hugo 0.155.0 or higher
• Git

Configuration Example:

[params]
  description = "Your site description"
  author = "Your Name"
  logo = "/images/logo.svg"
  show_share_buttons = true

[params.social]
  twitter = "https://twitter.com/yourusername"
  github = "https://github.com/yourusername"

Content Layouts & Components

The theme provides comprehensive layout options for various content types:

Homepage Features:

• Hero section with customizable call-to-action
• Posts grid with featured images and metadata
• Feature cards for highlighting important content
• Newsletter signup and social proof sections

Blog Post Layouts:

• Card-based listing with images and categories
• Full-width single post layout with optimal typography
• Author information and related posts
• Social sharing buttons and engagement metrics

Advanced Components:

• Modern, accessible forms with validation states
• Responsive tables and code syntax highlighting
• Blockquotes and pull quotes for emphasis
• Image galleries with lightbox functionality

Customization & Theming

Olivero Hugo Theme is built for extensive customization while maintaining its design integrity:

Color Customization:

:root {
  --color-primary: #0055f4;
  --color-text: #1a1a1a;
  --color-background: #ffffff;
}

Typography Adjustments:

:root {
  --font-lora: "Lora", Georgia, serif;
  --font-metropolis: "Metropolis", sans-serif;
  --font-size-base: 1.125rem;
}

Layout Variables:

:root {
  --container-max-width: 1200px;
  --grid-gap: 1.5rem;
  --space-8: 2rem;
}

Dark Mode Support

Olivero Hugo Theme now includes built-in dark mode support with seamless user experience:

Features:

• System Preference Detection: Automatically detects user OS color scheme preference
• Manual Toggle: Convenient toggle button in the header for manual switching
• Persistent Preferences: User choice saved to localStorage for consistent experience across sessions
• Full Color Inversion: Complete dark theme implementation across all components

The dark mode maintains the same accessibility standards as the light theme, ensuring comfortable reading in any lighting condition.

Color Schemes

Choose from 6 pre-built color schemes to match your brand identity:

Access the color scheme selector directly in the header, conveniently located next to the dark mode toggle for easy access.

Enhanced Search

The theme includes a powerful client-side search functionality:

• Instant Results: Real-time search results as you type
• Keyboard Shortcut: Press Ctrl/Cmd + K to open search from anywhere
• Search Scope: Searches through post titles, summaries, and tags
• Clean Interface: Minimal, accessible search overlay

Multi-Language Support

Reach a global audience with comprehensive internationalization:

Supported Languages:

• English
• Spanish (Español)
• French (Français)
• German (Deutsch)
• Ukrainian (Українська)
• Arabic (العربية) with full RTL support

Features:

• Language switcher dropdown in header
• Automatic hreflang tags for SEO optimization
• RTL (Right-to-Left) support for Arabic
• Persistent language preference

Advanced Customization

Header Styles

[params.header]
  style = "default"  # Options: "default", "centered", "minimal"
  sticky = true

Footer Styles

[params.footer]
  style = "default"  # Options: "default", "minimal", "compact"
  columns = 3

Layout Options

[params.layout]
  sidebar_enabled = true
  sidebar_position = "right"  # Options: "left", "right"
  sidebar_width = "25%"

[params.features]
  newsletter = true
  related_posts = true
  author_box = true
  table_of_contents = true

Custom Assets

[params.custom_css]
  - "css/custom.css"

[params.custom_js]
  - "js/custom.js"

Component Variants

The theme provides flexible component options:

Sidebar Widgets:

• Search widget
• Categories list
• Recent posts
• Tags cloud

Alternative Layouts:

• List layout for blog posts
• Full-width content pages

Enhanced Components:

• Author box with bio and social links
• Newsletter subscription component
• Related posts section

Browser Compatibility

The theme delivers consistent experiences across modern browsers:

License & Community

The Olivero Hugo Theme is licensed under GPL 2.0, maintaining the same open-source spirit as the original Drupal theme. This ensures the theme remains free and accessible to everyone while encouraging community contributions.

Contribution Guidelines:

• Fork the repository and create feature branches
• Follow Hugo conventions for file organization
• Use semantic HTML5 and maintain WCAG compliance
• Write clean, well-documented code
• Test across browsers and devices thoroughly

Community Support:

• Comprehensive documentation and inline comments
• Active GitHub Issues for bug reports and feature requests
• GitHub Discussions for community collaboration
• Direct maintainer contact for premium support inquiries

What’s Next?

The Olivero Hugo Theme continues to evolve with new features and improvements:

Version 1.3 (Current):

• ✅ Dark mode support with system preference detection
• ✅ 6 color schemes with instant switching
• ✅ Enhanced search with keyboard shortcuts
• ✅ Multi-language support (6 languages)
• ✅ Header and footer style variants
• ✅ Sidebar layouts with configurable widgets
• ✅ Additional component variants (author box, newsletter)

Version 1.4 (Planned):

• Shortcodes for common content patterns
• Archive page template
• Contact form template
• Documentation improvements

Conclusion

The Olivero Hugo Theme represents more than just another theme option - it’s a commitment to accessible, beautiful web design available to everyone in the Hugo community. By bringing Drupal’s award-winning design to Hugo’s static site ecosystem, we’re enabling developers to create professional, inclusive websites without sacrificing performance or aesthetics.

If you prefer a utility-first approach with more custom control, check out my Building a Personal Portfolio with Tailwind CSS guide for an alternative methodology using plain HTML and JavaScript with Tailwind via CDN.

Whether you’re a seasoned Hugo developer or just starting your static site journey, Olivero provides the perfect foundation for building modern, accessible websites that delight users and perform exceptionally well.

Get started today:

• GitHub Repository: olivero-hugo
• Live Demo: Available in the repository
• Documentation: Comprehensive README with setup instructions

Built with love by Val Paliy for the Hugo community, this theme embodies the belief that great web design should be accessible to everyone. If you find value in the Olivero Hugo Theme, please consider starring the repository and sharing it with your network.