A retro dark theme for Hugo.

Simplicity is the ultimate sophistication
--- Leonardo da Vinci

Head to Hack Cabin for a production example running on AWS. There you can learn how After Dark is used within the Hack Cabin site architecture as well.

• Dark theme intended for low-light reading
• Entire page served in a single HTTP request (including favicon)
• Grid layouts and more using hack.css
• Responsive typography optimized for mobile, tablet and desktop
• Block Templates for foolproof layouts
• Google Analytics tracking using the internal async template
• Rich post byline including word count and reading time
• Extensible taxonomy terms template
• Related posts feature guides users to similar content
• Configurable menu system for global site navigation
• Simple list pagination with page indicators
• Custom page meta descriptions and rel meta for SEO control
• Site verification with Google, Bing and Yandex
• Default 404 page with engaging MP4 background video
• Full site keyboard accessibility
• No JavaScript for predictable use on terminal-based browsers

From your Hugo site directory, run:

(cd themes; git clone https://github.com/comfusion/after-dark)
hugo serve --theme=after-dark

Copy the custom archetypes to your site:

cp themes/after-dark/archetypes/* archetypes

Include the following in your site's config.toml:

baseurl = "https://c74ce35e.ngrok.io" # Controls base URL
languageCode = "en-US" # Controls html lang attribute
title = "After Dark" # Homepage title and page title suffix
paginate = 5 # Number of posts to show before paginating

enableRobotsTXT = true # Suggested, enable robots.txt file
googleAnalytics = "" # Optional, add tracking Id for analytics
SectionPagesMenu = "main" # Enable menu system for lazy bloggers

[params]
  description = "" # Suggested, controls homepage description meta
  author = "" # Optional, controls author name display on posts
  show_menu = false # Optional, set false to disable menu entirely
  powered_by = true # Optional, set false to disable theme credits

  [params.seo]
    google_verify = "" # Optional, Google verification code
    bing_verify = "" # Optional, Bing verification code
    yandex_verify = "" # Optional, Yandex verification code

Configure menu in config.toml if desired:

[menu]
  [[menu.main]]
    name = "Home"
    weight = 0
    identifier = "home"
    url = "/"
  [[menu.main]]
    name = "Posts"
    weight = 1
    identifier = "post"
    url = "/post/"

Add pages to the menu from page frontmatter:

menu = "main"
weight = 3

The specific version of hack.css used is pinned in the package.json dependency manifest. To check for updates do an npm i and run npm run ncu.

If an update is available consider taking the automatic update, but keep the version pinned in the manifest. Once the new hack dependency version is pulled down to the node_modules directory, copy the contents of hack.css and dark.css into the critical-vendor.css.html file.

Once the vendor file is updated pop open your favorite dev tools and test the changes by previewing your site on mobile, tablet and desktop at different display resolutions and orientations. Make any tweaks necessary to the hack.css style overrides indicated in critical-custom.css.html.

If you want to customize the css rules without touching the default css theme files, create a custom.css.html file in layouts/partials based at the root directory. In the custom.css.htmlfile, create a <style media="screen"></style> element and put your css customizations into.

Example:

<style media="screen">
  /* personal enhancements */
  .dark {
    color: #b2df82;
  }
</style>

Issues have been disabled for this repo. If you feel passionate something needs to be changed please feel free to submit a pull with your suggested changes.