+++
title = "Custom Styles"
description = "Modify theme styles for complete design control."
categories = ["customizing"]
tags = ["color", "style", "branding"]
features = ["code highlighter", "snippets"]
[[copyright]]
  owner = "VHS"
  date = "2019"
  license = "agpl-3.0-or-later"
+++

After Dark uses {{< external href="https://gohugo.io/hugo-pipes/" text="Hugo Pipes" />}} to enable customization of theme styles using CSS. Left unmodified the following custom styles are provided by default:

{{< highlight css "linenos=inline" >}}
{{< include "themes/after-dark/assets/css/custom.css" >}}
{{< /highlight >}}

Adjust them from `custom.css` in the site `assets/css` directory:

```
├── archetypes
├── assets
│   └── css
│       └── custom.css
├── content
```

If the file doesn't exist yet, copy it from the theme default:

```sh
$ mkdir -p assets/css
$ cp themes/after-dark/assets/css/custom.css assets/css
```

Then open the file and begin editing, or remove it to restore default styles.

{{< hackcss-alert type="info" >}}
  <strong>Tip:</strong> Choose from thousands of predefined color palettes on {{< external "https://coolors.co/" />}}.
{{< /hackcss-alert >}}