Color Your World is a Hugo theme built around an HTML color picker that lets site visitors change the accent color in real time, paired with customizable dark and light modes for personal blogs and portfolio sites. Developed by Raphael Aguiar, the theme runs on Hugo Extended (minimum version 0.128.0) and heavily leverages Hugo Pipes for asset processing, image resizing, and WebP generation.
What is Color Your World?
Color Your World is a Hugo theme for personal websites that outputs a static site with a JavaScript-driven color picker, dark/light mode toggle, responsive images, and optional search. It takes content written in Markdown, processes it through Hugo Extended with SCSS preprocessing, and generates a minified static site with Open Graph, Twitter Card, and Schema.org metadata. The theme is open source under the MIT license and distributed via GitLab.
Key Features
- Live accent color picker — Visitors can select from preset colors defined in the config; the theme ships with 2 default accents and supports unlimited presets via the
presetsarray. - Dark/light mode — Both palettes are defined in
assets/scss/colors/variables.scss, with configurable defaults and optionalprefers-color-schemedetection. - Pagefind search — Basic client-side search is built in, with configurable result limits (default 30), input length constraints, and pagination.
- Image processing pipeline — Images are resized to 1280x, 960x, and 640x widths, with WebP generated on Hugo 0.83+; cover images are cropped for Open Graph (1200x630) and Twitter Cards (1280x640).
- Social shortcode — Supports centralized platforms (GitHub, X, LinkedIn, etc.) and decentralized platforms with multiple instances (Mastodon, Matrix, Peertube, Pixelfed, Bluesky), including rel="me" links.
- Contact form via Formspree — A contact-form shortcode integrates with Formspree, configurable with subject dropdown, placeholders, and message length validation.
- Privacy-aware by default — No Google Analytics, Google Fonts, or Disqus; fonts are self-hosted WOFF2 (Oswald and Open Sans, Latin charset) and inline scripts are removable to support strict CSP.
- KaTeX math rendering — Includes KaTeX 0.16.11 for mathematical formulas, with auto-render extension configuration.
Who is it for?
- Personal bloggers — Writers who want a fast, SEO-friendly Hugo site with minimal JavaScript and privacy-respecting analytics options.
- Portfolio owners — Creatives who need a visually distinctive accent color system and responsive image galleries that adapt to their work.
- Hugo developers — Developers who want a customizable theme with overridable partials (e.g.,
site-title.html,head-append.html) and SCSS variables for easy theming. - Privacy-conscious site owners — Users who avoid third-party trackers and prefer self-hosted fonts and local search over external services.
Use cases
- Personal blog: Publish Markdown posts with syntax highlighting (Monokai in dark mode, Solarized Dark in light mode), local search, and a contact form for reader feedback.
- Portfolio site: Showcase projects with responsive images, custom cover images for social sharing, and a 404 page configurable via
params.notFound. - Multi-language site: Translate UI strings via the
i18ndirectory, which includes German, Ukrainian, and English translations. - Math-heavy content: Enable KaTeX to render LaTeX equations in blog posts, with lazy loading for a minimal footprint.
How does the theme work?
After cloning the theme into themes/color-your-world, you configure site settings in config.toml. The theme automatically processes SCSS, generates responsive images, and applies the color schemes based on params.style. Visitors interact with the color picker and dark/light toggle through vanilla JavaScript, which stores preferences in the browser and applies CSS custom properties.
FAQ
What Hugo version does Color Your World require?
The minimum is Hugo Extended 0.128.0. Older versions will not work because the theme relies on recent Hugo Pipes features and pagination.pagerSize.
Is the theme free to use?
Yes, it is open source under the MIT license. The developer accepts optional support via Ko-fi, but the theme itself is free to use and modify.
Does it include a search feature?
Yes, search uses Pagefind, a static search engine. It supports pagination and configurable maxResults (default 30), minLength (default 3), and maxLength (default 32).
Can I customize the accent color presets?
Yes. In config.toml, set [params.style] presets to an array of hex colors. The default provides 10 presets on the demo site, but you can define as many as you want.
Does the theme support contact forms?
It includes a contact-form shortcode that integrates with Formspree. You need a Formspree form ID, and you can configure the subject dropdown, placeholders, and minimum message length (default 140).
