customizing

Custom Homepage

Hide the blog and specify how content is shown.
After Dark provides a configurable way to customize the content shown on your homepage without the need for creating a Custom Layout. Use it to hide the blog and display recent content from various sections of your site. Quick Example 1[params.layout.home] 2 hide_blog = true 3 4[[params.layout.home.section]] 5 type = "about" 6 weight = 1 7 8[[params.layout.home.section]] 9 type = "code" # Required, name of section to show on homepage 10 limit = 4 # Optional, set number of items to show from section 11 weight = 2 # Optional, choose layout order for section 12 thumbs = ["fill", "400x400"] # Optional, thumbnail image processing 13 14[[params.

Custom Layouts

Customize layouts without modifying theme source.
After Dark uses block templates to facilitate the creation of unique page layouts anywhere on your site. Use them to add Snippets to pages in a section, selectively apply Custom Styles or add an about section to the homepage. How it works Given the following block with optional default value: <title>{{block"title"}}Site Title{{end}}</title> Inheriting templates may omit the block and keep the default value or define the block to change its value, as shown here:

Custom Styles

Modify theme styles for complete design control.
After Dark uses Hugo Pipes to enable customization of theme styles using CSS. Left unmodified the following custom styles are provided by default: 1/*! 2* Copyright (C) 2019 Josh Habdas <jhabdas@protonmail.com> 3* 4* This file is part of After Dark. 5* 6* After Dark is free software: you can redistribute it and/or modify 7* it under the terms of the GNU Affero General Public License as published 8* by the Free Software Foundation, either version 3 of the License, or 9* (at your option) any later version.

SVG Favicon

Decorate your site with a unique SVG favicon.
After Dark ships with an 169B optimized1 SVG favicon embedded into every page: {{/* Copyright (C) 2019 Josh Habdas <jhabdas@protonmail.com> This file is part of After Dark. After Dark is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. After Dark is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Skin Styles

Choose one of eight customizable skin styles.
After Dark uses hackcss to provide four color palettes and two display modes. Toggle between them from your site configuration for 8 possible combinations: table[summary] td pre { margin: 0; } Palette Mode Hack Standard Dark None required. [params.hackcss] mode = "standard" Dark Grey [params.hackcss] palette = "dark-grey" [params.hackcss] mode = "standard" palette = "dark-grey" Solarized Dark [params.

Snippets

Share code between Shortcodes and Custom Layouts.
Snippets are template abstractions enabling you to reuse the same markup and logic used to create Shortcodes in your Custom Layouts. Take for example the included Button Group shortcode used for creating a set of styled buttons, which we’ll look at in detail here. First the partial: {{/*Copyright(C)2019JoshHabdas<jhabdas@protonmail.com>ThisfileispartofAfterDark.AfterDarkisfreesoftware:youcanredistributeitand/ormodifyitunderthetermsoftheGNUAfferoGeneralPublicLicenseaspublishedbytheFreeSoftwareFoundation,eitherversion3oftheLicense,or(atyouroption)anylaterversion.AfterDarkisdistributedinthehopethatitwillbeuseful,butWITHOUTANYWARRANTY;withouteventheimpliedwarrantyofMERCHANTABILITYorFITNESSFORAPARTICULARPURPOSE.SeetheGNUAfferoGeneralPublicLicenseformoredetails.YoushouldhavereceivedacopyoftheGNUAfferoGeneralPublicLicensealongwiththisprogram.Ifnot,see<https://www.gnu.org/licenses/>.*/-}} <div class="btn-group{{ifeq.formactions"true"}}form-actions{{end}}{{with.class}}{{.}}{{end}}"> {{.body}} </div> Now the shortcode: {{/*Copyright(C)2019JoshHabdas<jhabdas@protonmail.com>ThisfileispartofAfterDark.AfterDarkisfreesoftware:youcanredistributeitand/ormodifyitunderthetermsoftheGNUAfferoGeneralPublicLicenseaspublishedbytheFreeSoftwareFoundation,eitherversion3oftheLicense,or(atyouroption)anylaterversion.AfterDarkisdistributedinthehopethatitwillbeuseful,butWITHOUTANYWARRANTY;withouteventheimpliedwarrantyofMERCHANTABILITYorFITNESSFORAPARTICULARPURPOSE.SeetheGNUAfferoGeneralPublicLicenseformoredetails.YoushouldhavereceivedacopyoftheGNUAfferoGeneralPublicLicensealongwiththisprogram.Ifnot,see<https://www.gnu.org/licenses/>.*/-}} {{$formactions:=.Get"formactions"}} {{$class:=.Get"class"}} {{$body:=.Inner}} {{partial"components/buttongroup.html"(dict"formactions"$formactions"class"$class"body"$body)}} Notice how the shortcode serves only to collect input and call the partial, which contains all markup and display logic.

Trim Color

Define the color used to display borders around your site.
Trim color can sometimes affect how a browser or OS chooses to display borders and accent colors for your site. In Brave, for example, adjusting trim color affects stylizes the location bar. Set a trim color to customize this behavior. The default trim color is automatically set to background color of the currently selected Skin Style. Override the default in your Custom Styles by declaring the --trim-color variable inside a :root selector at the top of the file: