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.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:

$ 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.

Tip: Choose from thousands of predefined color palettes on coolors.co/.