Hugo Themes Logo Hugo Themes
Eclectic Hugo Theme screenshot

Eclectic Hugo Theme

Author Avatar Theme by Atishay
Updated: 26 Oct 2025
17 Stars

A theme for high performance customizable Hugo websites

Github

Overview

Eclectic is a theme for high-performance customizable Hugo websites. It offers a range of features including fast loading times, the ability to customize color themes, and support for dark mode. It also includes structured metadata support, a configurable footer, search functionality, and full SEO capabilities. With a CSS Grid based powerful grid system and different layout types, Eclectic provides flexibility in designing and organizing web pages.

Features

  • Fast: Eclectic theme is optimized for high performance and fast loading times.
  • Color customization: Users can choose from millions of color themes using CSS Variables. The theme also includes a color switcher to allow easy customization of the color theme.
  • Dark mode support: Eclectic supports dark mode, providing a better viewing experience in low light environments.
  • Structured metadata support: Eclectic enables the addition of advanced content to any page, not just the home page, through structured metadata.
  • Configurable footer: The theme offers a flexible footer section with various options for customization, including title, content, images, recent sections, contact snippets, and menus.
  • Search support: Eclectic includes search functionality without the need for external dependencies. It generates a JSON file of the entire website for search purposes.
  • Full SEO capabilities: The theme incorporates JSON-LD, Twitter cards, and open graph for comprehensive SEO optimization.
  • CSS Grid based powerful grid system: Eclectic utilizes CSS Grid for creating customizable and responsive grid layouts.
  • Layout types: The theme provides different layout types, including default pages for simple markdown content, post pages for content with a sidebar and cover image, and contact pages for creating contact us pages.

Installation

To install the Eclectic theme, follow these steps:

  1. Add the theme to your Hugo website’s theme directory.
  2. Configure the theme’s settings in the config.toml file.
  3. Customize the color theme and other options in the theme’s settings.
  4. Add content to your website using the predefined layout types and template blocks provided by the theme.
  5. Customize the footer section as desired using the available options.
  6. Enable the color picker and dark mode features if desired.

For detailed installation instructions and code snippets, refer to the official documentation of the Eclectic theme.

Summary

Eclectic is a high-performance Hugo theme that offers a range of features for customizable websites. It prioritizes speed and performance while providing flexibility in design and layout. With options for color customization, dark mode support, structured metadata, and a configurable footer, Eclectic allows users to create unique and SEO-optimized websites. Its use of CSS Grid provides a powerful and responsive grid system, and the theme includes search functionality and full SEO capabilities. Overall, Eclectic is a comprehensive and versatile theme for creating high-quality Hugo websites.