dactl is a fast, configurable Jekyll blog theme that ships with a live Light/Dark theme switcher and hero-image post layouts.
What is dactl?
dactl is a modern open-source Jekyll theme for blogging, designed to be fast and customizable. It takes Jekyll site content — posts, YAML front matter, and _config.yml settings — and produces a static blog with a responsive layout, archive and tags pages, and an About page. The theme started as a fork of daktilo but was almost entirely rewritten, and is released under the MIT license. The repository currently has 219 stars on GitHub.
Key Features
- Live theme switcher — built in vanilla JavaScript using CSS Variables; the reader's choice is saved in Local Storage and persists across sessions.
- Hero-image blog layout — the main layout shows 5 posts per page, each with a background image and color overlay set in the post's YAML front matter; you can configure it to show excerpts or titles only.
- Barefoot inline footnotes — kramdown footnotes become interactive inline notes via the Barefoot plugin.
- Compact custom icon set — IcoMoon icons, about 4kb.
- Responsive, rem-based design — typography and components are sized in rem and em, so the whole site scales from root font sizes in _sass/variables.scss.
- Jekyll 3.x and GitHub Pages compatible — includes pagination (5 posts per page), SEO optimization, Google Analytics integration, and Disqus comments.
- Rouge syntax highlighting — code blocks get numbered lines.
- Extras pages — Archive (grouped by month, with a DuckDuckGo site search box), About page, tags and tag pages, and link-post support.
Who is it for?
- Bloggers and writers who want a fast, lightweight Jekyll blog that they can host free on GitHub Pages.
- Jekyll developers who want a well-structured, configurable theme to fork and customize — the code uses partials heavily and exposes options in _config.yml and config.yml.
- Design-conscious web users who appreciate the built-in Light/Dark theme switcher and hero-image aesthetics.
What can you do with dactl?
- Indie bloggers: set up a personal blog quickly by forking the repo and renaming it to yourusername.github.io.
- Technical writers: publish docs or tutorials with numbered-code syntax highlighting and footnote support.
- Jekyll learners: study dactl's source to learn Jekyll structure, Liquid handling, and CSS Variables theming.
How does dactl work?
To use it, clone or download the repo, run jekyll serve locally, or host on GitHub Pages via a fork. Blog layout options are set in config.yml — choose whether to use hero images, show full posts or excerpts, or only titles. Per-post hero image and overlay color are defined in each post's YAML front matter.
Pros and cons
- Pros: free and MIT licensed; live theme switcher; fully configurable layout; works with GitHub Pages.
- Cons: relies on modern CSS properties (mix-blend-mode, webkit-filter, CSS variables), so it may not render properly in older browsers; it was tested only on webkit browsers (Safari, Chrome, Vivaldi). The theme switcher can occasionally fail to inject all colors on first page load, fixing itself after toggling themes.
Alternatives
- daktilo — the Jekyll theme that dactl was forked from, with a similar one-column layout.
- Hydejack — another Jekyll theme that inspired dactl's hero-image handling and rem-based sizing.
- Minimal Mistakes — a popular, highly configurable Jekyll theme that influenced dactl's _config.yml approach.
FAQ
Is dactl free?
Yes, dactl is open-source and released under the MIT license, so you can use, modify, and redistribute it freely.
Does dactl work with GitHub Pages?
Yes. dactl is fully compatible with Jekyll 3.x and GitHub Pages. To host, fork the repository and rename it to yourusername.github.io.
Can I configure the blog layout?
Yes. In config.yml you can enable or disable hero images, choose between full post content and excerpts, or show post titles only. Both the blog and post layouts adapt accordingly.
What browser support does dactl have?
dactl uses modern CSS features such as mix-blend-mode, webkit-filter, and CSS variables. It is tested and works fully on webkit-powered browsers: Safari, Chrome, and Vivaldi. Older browsers may not display it correctly.
How do I set the hero image for a post?
Set the image path and overlay color in the post's YAML front matter; the Liquid logic in include/utils/hero.html applies them to the post's heading tile.
