Customizing

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: 1a[rel*="external"]::after { 2 content: " " url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20class='i-external'%20viewBox='0%200%2032%2032'%20width='14'%20height='14'%20fill='none'%20stroke='%23ff9800'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='9.38%'%3E%3Cpath%20d='M14%209%20L3%209%203%2029%2023%2029%2023%2018%20M18%204%20L28%204%2028%2014%20M28%204%20L14%2018'/%3E%3C/svg%3E"); 3} 4nav a.active { 5 background-color: inherit; 6 color: #fff; 7} 8a[itemprop="url"] { 9 color: #ff9800; 10} 11a[itemprop="url"]:hover { 12 color: #fff; 13} 14.muted, .help-block { 15 opacity: 0.70; 16} 17.hack .muted, 18.hack .help-block { 19 color: #e0e0e0; 20} Adjust them from custom.

SVG Favicon

Decorate your site with a unique SVG favicon.
After Dark ships with an 169B optimized1 SVG favicon embedded into every page: <link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E"> The favicon is a black-colored oblique triangle in the shape of a tepee as shown2 on the Online Help Overview. The center of the triangle uses negative space to give the illusion of a second equilateral triangle in the shape of a pyramid, or open fire, contained within. The color of the icon can be modified by changing the fill attribute:

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: <div class="btn-group{{ifeq.formactions"true"}}form-actions{{end}}{{with.class}}{{.}}{{end}}"> {{.body}} </div> Now the shortcode: {{$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: