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  VHS <vhsdev@tutanota.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.
10 *
11 * After Dark is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
14 * GNU Affero General Public License for more details.
15 *
16 * You should have received a copy of the GNU Affero General Public License
17 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
18 */
19
20a[rel*="external"]::after {
21  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");
22}
23nav a.active {
24  background-color: inherit;
25  color: #fff;
26}
27a[itemprop="url"] {
28  color: #ff9800;
29}
30a[itemprop="url"]:hover {
31  color: #fff;
32}
33.muted, .help-block {
34  opacity: 0.70;
35}
36.hack .muted,
37.hack .help-block {
38  color: #e0e0e0;
39}

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