Edidor is a Hugo theme that mimics a code-editor interface with a built-in style generator, including a 'wild mode' that applies random CSS color rules to pages.
What is Edidor?
Edidor is a free, open-source Hugo theme (MIT license) that turns a static website into an editor-like interface. It takes standard Hugo content — Markdown files, menus, and config.toml — and renders a responsive site with light, dark, and automatically generated "wild" color schemes. The theme was created by GitHub user sfengyuan and was promoted by the official Hugo Twitter account in 2019.
Key Features
- Wild mode style generator — A single click applies random CSS color rules to the entire page and stores them in localStorage, so the scheme persists across pages on the same browser.
- Export wild-mode CSS — The "Export Wild mode" button downloads a CSS file that captures the generated colors; you can then set it as a permanent custom theme via the
customCssconfig parameter. - Responsive viewport-unit layout — The layout is built on viewport units and tested from 1920 x 1080 desktop screens to 320 x 568 mobile displays.
- Minimal JavaScript footprint — The theme uses no frameworks; the only external code is Lodash's
throttleand an easing function from d3.ease. - Inline SVG icons — All static icons are inline SVGs that use CSS mask-image, so they can be recolored to match any generated theme.
- highlight.js syntax highlighting — Code blocks are highlighted with highlight.js, the feature can be turned off, and a custom build can be loaded by setting
useCustomSyntaxHighlight = true. - Disqus comments — Blog posts get standard Hugo/Disqus comment integration.
- Logo variants — The theme looks for
logo.svg,logo_light.svg, andlogo_wild.svgand displays the matching one for the active mode.
Who should use Edidor?
- Hugo bloggers who want a developer-focused, code-editor aesthetic for a personal or technical blog.
- Technical writers documenting software libraries or APIs, since the editor look complements code-heavy content.
- Developers launching a portfolio who want a minimalist, themeable Hugo site with multiple color modes.
- Frontend designers experimenting with automated color schemes, using wild mode as a rapid theming tool.
What can you do with Edidor?
- Personal sites: publish Markdown posts with code highlighting, Disqus comments, and light/dark/wild modes.
- Project documentation: use the editor-styled layout to present readmes and reference material.
- Theme experimentation: generate endless random palettes and export the CSS to reuse across other Hugo projects.
How does Edidor work?
Install the theme by running git submodule add https://github.com/sfengyuan/edidor in your Hugo site's themes directory (or git clone), then copy the config.toml from the exampleSite folder to your site root. When a visitor clicks "wild mode", the theme generates random CSS color rules and stores them in localStorage; on later pages the rules are loaded from localStorage and applied again. To use a generated palette permanently, click "Export Wild mode", name the theme, and add the downloaded CSS file through the customCss parameter.
Pros and cons
- Pros: Free and MIT licensed; no JavaScript frameworks; fully responsive; built-in light/dark/wild modes; SVG icons recolor dynamically; custom CSS/JS hooks.
- Cons: No Internet Explorer support (explicitly not planned); i18n translations not completed; wild mode produces unpredictable color combinations ("No guarantee for what colors you can get").
Pricing
Edidor is open-source under the MIT license and free to use, modify, and redistribute. It has no paid tiers or premium features.
FAQ
Does Edidor support dark mode?
Yes. Edidor ships with a light mode, a dark mode, and a "wild mode" that generates random color themes. The README's screenshots show all three modes.
Is Edidor free?
Yes, Edidor is released under the MIT license, so it is free for personal and commercial use.
Does Edidor support Internet Explorer?
No. The README explicitly states "NO IE support, and does in future!" — meaning IE is not supported and no future IE support is planned.
How do I install Edidor?
Inside your Hugo site's themes folder, run git submodule add https://github.com/sfengyuan/edidor or git clone. Then copy the config.toml from the exampleSite directory to your site root and adjust it.
