Hugo Dark Theme Site Generator
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Josh Habdas 2bfa8f77fe
fix(typography): remove text justification and hyphenation
3 years ago
archetypes chore(archetypes): remove congratulatory message from post archetype 1 year ago
bin refactor(install): beef up install script docs 1 year ago
images perf(install): remove design resources 1 year ago
layouts fix(typography): remove text justification and hyphenation 1 year ago
static/js A better 404 page 1 year ago
.gitignore fix(bundle): remove images folder from npm release 1 year ago chore(release): 1.6.0 1 year ago
LICENSE docs(license): there is no dana, only zuul 1 year ago docs(README): update windows instructions 1 year ago
package.json chore(release): 1.6.0 1 year ago
theme.toml chore(theme): update keywords 1 year ago

After Dark

A simple, yet highly configurable responsive dark theme for Hugo.

After Dark theme screenshots

NPM downloads per month Latest NPM version Project license


View the full list of features

    <td>Deceptive Simplicity</td>
    <td>After Dark is a <a target="feature" href="">Hugo theme</a>, making it a suitable starting point for <b>novice and advanced developers</b> alike. It advances using the "Code for today, not for tomorrow" philosophy of <abbr title="eXtreme Programming">XP</abbr>, and includes only what's necessary to create and run your site &ndash; nothing more.</td>
    <td>Semantic Versioning</td>
    <td>Predictable changes enable theme users stay up-to-date with what's happening. After Dark uses <a target="feature" href="">Semantic Versioning</a> and maintains a <a target="feature" href="">CHANGELOG</a> for easy consumption.</td>
    <td>Inclusive Design</td>
    <td>Optimized for mobile, tablet, desktop and <kbd>terminal</kbd> browsers.</td>
    <td>Performance Optimized</td>
    <td>Page content, favicon and styles <b>load in a single request</b> on all pages. External resources, if present, are loaded asynchronously and only when necessary. This keeps pages zippy and affords <b>~1 second page loads over 2G</b> when hosted using a <abbr title="Content Delivery Network">CDN</abbr>.</td>
    <td>Vertical Scaling</td>
    <td>After Dark is capable of generating <b>~1000 pages per second</b> thanks to <a target="feature" href="">Hugo</a>, and is likely to become faster over time.</td>
    <td><a href="#open-graph">Open Graph</a></td>
    <td>After Dark provides automatic and configurable <a target="feature" href="">Open Graph</a> support, making social shares pop like 37 pieces of flair.</td>
    <td><a href="#search-optimization">Search Optimization</a></td>
    <td>Using <a target="feature" href="">Schema Structured Data</a> and meta tags, After Dark gives crawlers rich data about the site structure and content. No configuration required.</td>
    <td><a href="#personalization">Personalization</a></td>
    <td>Adjust CSS using purpose-built <a href="#custom-styles">customization file</a>. Choose one of several <a href="#theme-variants">theme variants</a>. Swap in <a href="#favicon">your own favicon</a>. Leverage <a target="features" href="">block templates</a> to quickly extend new custom layouts. And use <a target="features" href="">hack.css</a> flexbox grids and CSS components to add style your site.</td>
    <td><a href="#section-menu">Section Menu</a></td>
    <td>Add and customize your site's global navigation. After Dark uses Hugo's <a target="feature" href="">Section Menu for "the Lazy Blogger"</a>, making navigation easy to create and predictable to use. Don't want navigation? Simply disable it from your site configuration.</td>
    <td><a href="#intelligent-lazy-loading">Intelligent Lazy Loading</a></td>
    <td>Lazy load your images, iFrames and script embeds. After Dark uses the <a title="feature" href="">lazysizes</a> library, a zero-configuration JavaScript library with support for <abbr title="Low Quality Image Placeholders">LQIP</abbr> and responsive images.</td>
    <td><a href="#related-content">Related Content</a></td>
    <td>Promote more of your content to your site visitors. By offering your readers more content that's relevant to them you can <b>increase your site's page views</b>, the time spent on your site and reader loyalty.</td>
    <td><a href="#table-of-contents">Table Of Contents</a></td>
    <td>Help users locate and share information on your site. By providing a <abbr title="Table Of Contents">TOC</abbr>, users will spend less time scrolling to locate information in larger documents, and are more likely to <i>deep link</i> to specific information on a page.</td>
    <td>Understand and action on user behavior by enabling Google Analytics. After Dark uses the <a target="feature" href="">async tracking snippet</a> to boost performance and allow script preloading.</td>
    <td>User Generated Content</td>
    <td>Improve search rankings and provide interactivity to users with <abbr title="User Generated Content">UGC</abbr>. Enable <a target="feature" href="">Disqus</a> commenting to get started.</td>
    <td>Reading Time</td>
    <td>Set user expectations up-front. After Dark provides <b>estimated reading time</b> for each post near the top of the page. This feature is automatic and assumes a reading speed of 200-250 words per minute.</td>
    <td><a href="#modification-dating">Modification Dating</a></td>
    <td>Surface recently updated content to users and crawlers, allowing them to understand when a post or page was was last modified. Recently updated posts will be flagged as modified, and visually lifted upwards in chronological listings.</td>
    <td><a href="#syntax-highlighting">Syntax Highlighting</a></td>
    <td>Share code snippets with style. After Dark provides <b>opt-in syntax highlighting</b> with support for line numbers and highlighted lines.</td>
    <td>Taxonomy Pages</td>
    <td>Help users discover taxonomic content. After Dark automatically generates <b>taxonomy and taxonomy terms pages</b>, and links to them in post bylines.</td>
    <td>Post Bylines</td>
    <td>Rich post bylines include optional author name, word count, links to taxonomy pages and metadata for search engines.</td>
    <td>Pagination can be hard. After Dark makes it easy with simple list pagination with page indication.</td>
    <td>Animated Error Page</td>
    <td>Decrease bounce rate when URL errors occur. After Dark provides an <a target="feature" href="">engaging 404 page</a> with animated background.</td>
    <td>After Dark uses semantic HTML5 markup to provide a better experience for aural readers and facilitates <b>navigation via keyboard</b> only.</td>

Demo & Tutorial

Head to Hack Cabin for a live example running on AWS and learn more about the site architecture. I’ve also written a step-by-step guide to hosting After Dark on Amazon, which includes a free year of hosting.

Getting Started

Install Hugo on your machine. Instructions for Homebrew on macOS:

brew install hugo

Install elinks (optional) and then run the install script located in the theme’s bin directory.

(cd themes; git clone
hugo serve --theme=after-dark

curl -sL | sh

Windows users unable to run the above may use [Cmder]( (full) to gain access to a suitable console emulator. Be aware of [the risks of `curl | sh`]( before ever running a script over a network.

**Note**: Script will run `hugo serve` as a backgrounded process. To kill the process get the `PID` with `lsof -n -i4TCP:1337` and then `kill -9` followed by the process identifier.

## Customizing

### Section Menu

After Dark uses Hugo's [Section Menu for Lazy Bloggers]( to produce global site navigation if enabled.

To customize the menu, update the settings in `config.toml` like:

  name = "Home"
  weight = 1
  identifier = "home"
  url = "/"
  name = "Posts"
  weight = 2
  identifier = "post"
  url = "/post/"

Or update the menu using front matter from your pages:

menu = "main"
weight = 3

Intelligent Lazyloading

Lazyloading prioritizes when and how images and more are downloaded, improving perceived performance and reducing page load times. When activated, lazyloading will start working automatically. No JavaScript configuration is necessary.

What makes it Intelligent? If no lazyloaded content is detected on a page when the site is generated, the feature will not be activated and no additional downloads will occur.

To activate lazyloading with lazysizes, add lazyload to the class attribute of your images/iframes in conjunction with a data-src and/or data-srcset attribute:

<!-- non-responsive -->
<img data-src="image.jpg" class="lazyload">
<!-- responsive with automatic sizes calculation -->
  data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w"
<!-- iframe example -->
<iframe frameborder="0"

Additional information and examples, including how to set-up and use LQIP (Low-Quality Image Placeholders), are available on the lazysizes repository on GitHub.

Related Content

Promote more of your content to your site visitors. By offering your readers more content that’s relevant to them you can increase your site’s page views, the time spent on your site and reader loyalty.

Related content surfaces content across sections by matching taxonomy tags. If After Dark finds related content it will automatically output a list of links to that content in reverse chronological order below the byline of your post content.

By default After Dark will display up to 7 items by title along with their reading times. You can limit the number of items displayed by setting the following optional parameter in the [params] section of your config.toml file:

related_content_limit = 5

Table Of Contents

Help users locate and share information on your site. By providing a TOC, users will spend less time scrolling to locate information in larger documents and are more likely to deep to specific information on a page.

To automatically generate a TOC for a post based on the page outline, add the following to your post front matter:

toc = true

To hide the TOC set toc = false, or simply remove the setting from the post front matter.

After Dark uses the HTML5 details and summary elements to provide a TOC which does not require use of CSS or JavaScript to function.

When a page is first loaded, the TOC will be collapsed so it does not clutter up the page. Once expanded, selecting an item in the TOC will smooth scroll to that section within the document, highlight the section header and updating the browser’s location bar for deep linking and back-button support.

Open Graph

After Dark leverages Open Graph tags using the undocumented internal template to achieve rich sharing cards for Facebook and other social networks, as shown here:

Open Graph sharing card screenshot

To create a social sharing card like the one shown above, specify author in config.toml and, optionally, override it from your front matter when specifying applicable details for the post or page:

title = "Become a Digital Nomad in Bali: The Lost Guide"
description = "Everything you need to know to become a Digital Nomad in Bali."
author = "After Dark"
date = "2017-02-02T11:57:24+08:00"
publishdate = "2017-01-28T02:31:22+08:00"
images = [

To configure site-wide Open Graph images to use as fallbacks for posts not specifying their own open graph images, add an array of URLs to the [params] section in config.toml:

images = [
  "" # Default Open Graph image for site

See Unsplash Source for image configuration options.

Note: While it would be possible, After Dark does not currently support relative links to images. If you would like to see this feature, please open a new issue.

Search Optimization

After Dark is built with SEO in mind. Schema Structured Data and other meta are applied to give robots what they want, automatically, without any configuration necessary.

The default set-up helps ensure your After Dark site will rank well in SERPs and prevent search crawlers from indexing undesirable content. Fine-tune your search settings using the following available options.

Webmaster Verification

Verify your site with several webmaster tools including Google, Bing, Alexa and Yandex. To allow verification of your site with any or all of these providers simply add the following to your config.toml and fill in their respective values:

  google = "" # Optional, Google verification code
  bing = "" # Optional, Bing verification code
  alexa = "" # Optional, Alexa verification code
  yandex = "" # Optional, Yandex verification code

Note: Claiming your site with Alexa was retired in May 2016. However, Alexa verification has been added as a convenience for existing sites migrating to After Dark.

Meta Descriptions

Well-crafted page titles help catch the human eye on search results pages. And meta descriptions provide a summary of the content and why its relevant for the reader, driving click-throughs.

To add a custom meta description to your pages and posts add description to the front matter:

description = "Everything you need to know to become a Digital Nomad in Bali."

In addition to appearing in search engines, meta descriptions also appear on individual pages and in content summaries in After Dark, adding transparency to how your page will appear in search.

If no custom description is provided After Dark will fallback to the description provided in config.toml. Learn more on how to craft your meta descriptions.

Modification Dating

Help user agents know when posts were last modified. To do so add publishdate to your page front matter and update date anytime you make an update to a post.

Updates will be made visible to readers by surfacing content higher in your page and post listings, and using using visible callouts on content summaries. For robots, making this change will automatically update Schema Structured Data and Web feeds, as well as the lastmod setting your sitemap.xml file.

You can be specific and use a datetime (with timezone offset) like:

date = "2017-02-02T01:20:56-06:00"
publishdate = "2016-11-21T10:32:33+08:00"

Or less specific and use just the dates:

date = "2017-02-02"
publishdate = "2016-11-21"

Review the W3C website for more information on dates and times for the Web infrastructure.

Index Blocking

Just because a page appears in your sitemap.xml does not mean you want it to appear in a SERP. Examples of pages which will appear in your sitemap.xml that you typically do not want indexed by crawlers include error pages, search pages, legal pages, and pages that simply list summaries of other pages.

Though it’s possible to block search indexing from a robots.txt file, After Dark makes it possible to block page indexing using Hugo configuration as well. By default the following page types will be blocked:

  • Section Pages (e.g. Post listings)
  • Taxonomy Pages (e.g. Category and Tag listings)
  • Taxonomy Terms Pages (e.g. Pages listing taxonomies)

To customize default blocking configure the noindex_kinds setting in the [params] section of your config.toml. For example, if you want to enable crawling for sections appearing in Section Menu add the following to your configuration file:

  noindex_kinds = [

To block individual pages from being indexed add nofollow to your page’s front matter and set the value to true, like:

noindex = true

And, finally, if you’re using Hugo v0.18 or better, you can also add an file with the noindex front matter to control indexing for specific section list layouts:

├── content
│   ├── modules
│   │   ├──
│   │   └──
│   └── news
│       ├──
│       └──

To learn more about how crawlers use this feature read block search indexing with meta tags.

Link Types

For related content split across multiple pages in a sequence After Dark supports use of prev and next settings in your front matter. Use them to provide semantic relationships between pages in a segmented article or series or LiveBlogPosting.

prev = "/series/learn-to-code/part-one/"
next = "/series/learn-to-code/part-three/"

Link Types are commonly shown at the top of the page in terminal browsers as auxiliary means of navigation and may help crawlers better understand relationships within your content.

Learn more about link types and how to custom taxonomies.

Meta Keywords

Meta keywords offer semantic detail to crawlers regarding the subject matter of your content. Keywords meta are generated automatically for pages given the tags used for that page, and for other pages using the site categories taxonomy. Keywords and key phrases may be customized by setting a keywords array in your front matter:

keywords = [
  "web development",
  "digital marketing",
  "social media",
  "link building"

While not considered relevant to some crawlers, keywords can be a useful way to document target search terms for use in PPC online advertising and provide semantic value to your pages.

Markdown Output

Gain more control over markdown conversion to HTML. By modifying the markdown processor settings you can take advantage of Blackfriday features not enabled by default.

To customize conversion output add a [blackfriday] section to your site’s config.toml file like so:

  hrefTargetBlank = true
  fractions = false

Overrides to theme markdown processing defaults are available from page front matter as well, giving you control on a page-by-page basis.

See the Hugo docs for additional configuration options.


Keep your content DRY and improve thematic consistency across your site. To help achieve this, Hugo provides Shortcodes.

Shortcodes are very powerful, and can be used to achieve functionality not otherwise available in the markdown processor. Hugo provides a number of built-in shortcodes you can use on your site. And After Dark provides some as well.

Here’s the blockquote shortcode provided by After Dark:

<blockquote {{ with .Get "class" }}class="{{ . }}"{{ end }} {{ with .Get "citelink" }}cite="{{ . }}"{{ end }}>
  {{ .Inner }}
  {{ with .Get "citelink" }}
    <cite><a target="_blank" href="{{ . }}">{{ $.Get "cite" }}</a></cite>
  {{ else }}
    <cite>{{ .Get "cite" }}</cite>
  {{ end }}

Use it in your markdown files like:

{{< blockquote cite="Bitly" citelink="" >}}
  <p>When you create your own Branded Short Domain, you can expect to see up to a 34% increase in CTR when compared to standard links.</p>
{{< /blockquote >}}

Additional theme-provided shortcodes at your disposal:

  • figure - Similar to the Hugo built-in, but with Intelligent Lazyloading, an adjusted caption title and smaller caption text.

To create your own custom shortcodes add a layouts/shortcodes directory to your site, place your shortcodes within and start using them in your markdown content.

Reference the Hugo docs for shortcode usage instructions.

Syntax Highlighting

Provide a richer experience when sharing code snippets on your site. After Dark provides opt-in support for code highlighting using the lovely One Dark and One Light syntax themes for Pygments.

Syntax Highlighting screenshot

Why not use Highlight.js? Given After Dark’s Inclusive Design goal, use of a JS-based solution would degrade support for terminal browsers. As an opt-in feature, however, your approach to Syntax Highlighting is at your discretion. Go nuts!

To set-up syntax highlighting for your After Dark site:

  • Follow Hugo’s Pygments installation instructions.
  • Open the themes/after-dark folder and run npm i (assumes NPM installed).
  • Then open ./node_modules/atom-one-pygments and npm i.
  • Once dependencies are installed, issue npm run build within the module to generate the stylesheets to the module’s ./dist directory.

Then choose either ./dist/light.css or dark.css depending on your Theme Variant and copy the contents of the file into your Custom Styles file.

Once configured, syntax highlighting with Pygments can be achieved using the Hugo built-in highlight shortcode. Reference Hugo’s Syntax Highlighting docs for usage instructions.

Not completely satisfied? Atom One Pygments is built as a theme roller, making it possible to modify the look-and-feel of the resulting syntax highlighting. Make it your own. See the README for more details.


After Dark uses hack.css to automatically style your markup, giving you instant access to flexbox grids, light and dark theme variants, and other pre-built components. Use them while creating new sections leveraging block templates. Additional personalization options listed below.

Custom Styles

To add your own theme styles or override existing CSS without having to change theme files do the following:

  1. Create a critical-custom.css in your site’s layouts/partials directory.
  2. Add your custom styles inside the file.

Example customization file:

/* override theme defaults */
.muted {
  color: rgba(255, 255, 255, 0.5);
/* custom styles */
figure {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
figure img {
  max-width: 80%;
figure a {
  border-bottom: none !important;
figure a:hover {
  background-color: inherit !important;

Your customizations will be inlined into the head section of each page and, overriding existing styles if specified.

Theme Variants

hack.css provides a few variants you may wish to use instead of the After Dark defaults. To download them do an npm i from /themes/after-dark/ (assumes NPM installed).

Once downloaded, open node_modules/hack/dist directory and replace the contents of critical-vendor.css with the CSS you wish to use, updating the theme_variant setting in the site configuration like:

theme_variant = "standard dark-grey"

Why not use external CSS files? After Dark is optimized for speed and, as a result, limits the number of HTTP requests whenever possible. Concessions for external CSS for HTTP/2 Push State support will be made upon request.

Once the vendor file is updated, open your favorite dev tools and test the changes by previewing your site on mobile, tablet and desktop at different display resolutions and orientations, making any tweaks necessary to critical-theme.css.

And, finally, adjust your Customized Styles, 404 page and /meta/theme-color as necessary.


After Dark comes preinstalled with a tiny SVG favicon embedded into every page. To customize it create a file named favicon.html under /layouts/partials within your site and place an icon link within it.

Why SVG? Simple. They have a smaller file size and are more flexible. SVG favicons can be styled with CSS or even animated with JavaScript. Firefox added support for them in Release 41, which you can preview the current icon until other browsers fall in line.


If you’ve spotted a bug or would like to make an enhancement suggestion, please open an issue on GitHub. Build something awesome with After Dark? Add it to the wiki for others to see. For general questions or support, please feel free to reach out directly.