Hugo Themes

Prev/Next: All Themes

Simple Dark

A simple dark theme for general blogging, documentation and portfolio purposes.

Download Demo
Simple Dark

Simple Dark

A dark theme for Hugo static site generator.

About

Simple Dark is a simple dark theme for Hugo . It is based on the Coder theme by Luiz de Prá because of its simplicity in design. After making some changes to the theme I realized that I had changed enough to make it a new theme. So I decided to share it with the community.

Simple Dark Screenshot
Live demo of theme host on Cloudflare pages

Features

  • Responsive
  • Dark mode
  • Syntax highlighting
  • Analytics
  • Comments with hugo compatible commenting systems.
  • Social links using Font Awesome icons via icon kit.
  • Image management with captions.

Installation

You can install the theme either as a clone or submodule if you are using git or you can download the theme as a zip file. I recommend using git to install via a submodule because it makes it easier to update the theme.

Clone 

git clone https://github.com/MichaelSchaecher/simple-dark.git themes/simple-dark

Submodule

Install the theme as a submodule is preferred that way if you make changes to the theme it well not be tracked by git.

# Add the theme as a submodule
git submodule add https://github.com/MichaelSchaecher/simple-dark.git themes/simple-dark

Configuration

After installing the theme you well need to configure inorder to use it. The following configuration are in yaml format, because I find it easier to read. If you prefer toml or json you can convert the configuration to the format you prefer.

NOTE: For now the right-to-left (RTL) is not supported. I am working on adding support for RTL, but as I’m not bilingual it is taking me longer than I would like.

Site Parameters

The following are the site parameters that you can set in the config.yaml file.

# config.yaml
baseURL: "/"
title: Your site title
theme: simple-dark
languageCode: en
defaultContentLanguage: en

# How many posts to show on the home page; the default is 10 and the maximum is 100.
paginate: 20

Markdown Parameters

By default Hugo does not render html in markdown files. To enable html rendering you need to set the unsafe parameter to true in the config.yaml file. I also recommend setting the endLevel parameter to 4 and the startLevel parameter to 2 in the config.yaml file. This well set the table of contents to start at the h2 level and end at the h4 level.

markup:
  goldmark:
    renderer:
      unsafe: true
  tableOfContents:
    endLevel: 4
    ordered: true
    startLevel: 2
  highlight:
    noClasses: false

Author, Description and Keywords

The following are the author, description and keywords parameters that you can set.

params:
  author: Your name
  description: Your site description
  keywords: Your site keywords

Licensing

The theme supports link to the license type in the footer. You can set the license type and location under the params section.

params:

# ---

  license:
    type: MIT
    location: link to license

See Also

maxSeeAlsoItems: 1 is the maximum number of see also items to show in the sidebar. The default is 5 and the maximum is 10. This is used to show series the post is part of.

Because of how posts are rendered in Hugo you need to add the following to the front matter of each post you want to be part of a series.

Post front matter:

series:
  - name: Series Name
    weight: 1

Font Awesome

The theme uses Font Awesome icons via the icon kit. You can enable the icon kit by setting the fontawesomeKit parameter to the kit code.

You well need to sign up for a free account to get the kit code. The advantage of using the kit code is that you can use the latest icons and you can use the icons in your site without the need to download the icons to your site.

Custom SCSS

Using a custom scss maybe enabled by setting the customSCSS parameter to the relative path. This means the scss file must be in the assets or static directory. However, if you are using a scss file in the assets directory you may just want to import the scss file by copying the theme/simple-dark/assets/scss/simple-dark.scss file to your assets/scss directory and adding @import "simple-dark"; at the bottom.

Keep in mind that if you do copy the file, you well need to use the same relative path as the original file. For example, theme/simple-dark/assets/scss/simple-dark.scss would be assets/scss/simple-dark.scss. Not doing so well cause the theme to not render correctly or build errors.

params:

# ---

  customSCSS: "scss/custom.scss"

Analytics

The theme supports Google Analytics, Plausible and Simple Analytics. You can enable the analytics by setting the analytics parameter to the name of the analytics you want to use. You can also set the analyticsID parameter to the ID of the analytics you want to use.

However, some hosting providers like Cloudflare Pages provide analytics without the need to configure with the theme, otherwise set the analyticsID parameter to the ID of the analytics you want to use.

Content-Security-Policy

Content-Security-Policy (CSP) is a security feature that helps prevent cross-site scripting (XSS) attacks. The theme supports CSP by setting the csp parameter to the CSP you want to use. However, some hosting providers like Cloudflare Pages github pages and netlify provide CSP without the need to configure with the theme.

This is more useful if you are hosting your site on your own server.

params:

# ---

  csp:
    childsrc: [self]
    fontsrc: [self, https://fonts.gstatic.com, https://cdn.jsdelivr.net/]
    formaction: [self]
    framesrc: [self, https://www.youtube.com]
    imgsrc: [self]
    objectsrc: [none]
    stylesrc: [self,unsafe-inline,https://fonts.googleapis.com/,https://cdn.jsdelivr.net/]

    scriptsrc: [self,unsafe-inline,https://www.google-analytics.com,https://cdn.jsdelivr.net/]

You may to edit the CSP to fit your needs. For more information on CSP see Content-Security-Policy .

The theme uses font awesome icons for the social and contact links. Because of the default fonts for smart phones and tablets and older version is used, otherwise the icons well not render correctly.

Use the social icons that you want. For using rss feed you need to set the rel and type parameters.

params:

---

social:
    - name: github
      icon: fa fa-2x fa-github
      url: https://github.com/MichaelSchaecher/
    - name: Gitlab
      icon: fa fa-2x fa-gitlab
      url: https://gitlab.com/
    - name: Twitter
      icon: fa fa-2x fa-twitter
      url: https://twitter.com/
    - name: LinkedIn
      icon: fa fa-2x fa-linkedin
      url: https://www.linkedin.com/
    - name: Medium
      icon: fa fa-2x fa-medium
      url: https://medium.com/
    - name: RSS
      icon: fa fa-2x fa-rss
      url: https://myhugosite.com/
      rel: alternate
      type: application/rss+xml
    - name: Facebook
      icon: fa fa-2x fa-facebook-official
      url: https://www.facebook.com/
    - name: StackOverflow
      icon: fa fa-2x fa-stack-overflow
      url: https://stackoverflow.com/
    - name: Instagram
      icon: fa fa-2x fa-instagram
      url: https://www.instagram.com/

Taxonomies

Taxonomies are used to group content together: the only one that is required is series, if using the default layout/post/single.html. However, you can use any taxonomy you want by setting the taxonomies parameter to the taxonomy you want to use.

params:

# ---

  taxonomies:
    series: series
    tag: tags
    category: categories
    authors: authors

The navigation menu is generated from the config.yaml file. The menu is generated from the main menu. You can add menu items by adding the following to the config.yaml file.

params:

# ---

  menu:
    main:
      - name: Posts
        url: /posts/
      - name: Wiki
        url: /wiki/
      - name: Projects
        url: /projects/
      - name: About
        url: /about/
      - name: Contact
        url: /contact/

Back to top

License

The theme is released under the MIT license.

See also