/after-dark

A dark theme for Zola

Primary LanguageSCSSMIT LicenseMIT

after-dark

after-dark screenshot

Features

  • Code Snippet Clipboards
  • Latex Support
  • Light/Dark mode support
  • Search functionality

Contents

Installation

First download this theme to your themes directory:

cd themes
git clone https://github.com/getzola/after-dark.git

and then enable it in your config.toml:

theme = "after-dark"

This theme requires your index section (content/_index.md) to be paginated to work:

paginate_by = 5

The posts should therefore be in directly under the content folder.

The theme requires tags and categories taxonomies to be enabled in your config.toml:

taxonomies = [
    # You can enable/disable RSS
    {name = "categories", feed = true},
    {name = "tags", feed = true},
]

If you want to paginate taxonomies pages, you will need to overwrite the templates as it only works for non-paginated taxonomies by default.

Options

Top-menu

Set a field in extra with a key of after_dark_menu:

after_dark_menu = [
    {url = "$BASE_URL", name = "Home"},
    {url = "$BASE_URL/categories", name = "Categories"},
    {url = "$BASE_URL/tags", name = "Tags"},
    {url = "https://google.com", name = "Google"},
]

If you put $BASE_URL in a url, it will automatically be replaced by the actual site URL.

Title

The site title is shown on the homepage. As it might be different from the <title> element that the title field in the config represents, you can set the after_dark_title instead.

Author

You can set this on a per page basis or in the config file.

config.toml:

[extra]
author = "John Smith"

In a page (wrap this in +++):

title = "..."
date = 1970-01-01

[extra]
author = "John Smith"

Code Snippets

Syntax Highlighting:

[markdown]
# Whether to do syntax highlighting
# Theme can be customized by setting the `highlight_theme` variable to a theme supported by Zola
highlight_code = true

highlight_theme = "one-dark"

Enhanced Codeblocks (Clipboard Support and Language Tags)

To enable enhanced codeblocks, set the following in your config.toml:

[extra]
codeblock = true

LaTex Support

To enable LaTeX support with MathJax, set the following in your config.toml:

[extra]
latex = true

Searchbar

To enable a searchbar at the top of the page navigation, set the following in your config.toml:

build_search_index = true

[search]
index_format = "elasticlunr_json"

[extra]
enable_search = true