Cyberpunk Theme Variant

Icarus includes a second variant called Cyberpunk, for those who like dark-themed blogs. It takes the look of a city at night from cyberpunk fiction: a dark screen lit by neon signs in yellow, cyan, and magenta, panels framed like a heads-up display with chamfered corners, scanlines, and a neon grid running to the horizon at the bottom of the page. The titles of the posts glitch when you hover over them. It should be noted that it uses recent web styling features that are not working correctly in some legacy browsers, including Internet Explorer and legacy Microsoft Edge.

To enable the Cyberpunk theme, open _config.icarus.yml and make the following change:

_config.icarus.yml

- variant: default
+ variant: cyberpunk

Like other theme settings, the variant can also be set for a single post or page in its front-matter, as this post does:

Cyberpunk.md

title: Cyberpunk Theme Variant
variant: cyberpunk
---

The Cyberpunk variant is always dark, so the appearance and article.highlight.dark_theme settings of the dark appearance do not apply to it. Its navigation bar and footer are dark as well, so it shows the dark version of your logo, set in logo_dark (the theme’s own logo switches to /img/logo-dark.svg by itself).

Code blocks look like terminal windows, and their code is colored with the neon palette of the variant, whatever the theme set in article.highlight.theme.

The variant uses the Oxanium and JetBrains Mono fonts, which are loaded from the web font CDN (see CDN Providers).

Its animations, such as the glitch of the titles and the moving grid of the footer, stop for visitors who prefer reduced motion in the settings of their system.

If you wish to make further modifications to this theme variant, you can take a look at <icarus_directory>/source/css/cyberpunk.styl. Its colors are defined at the top of the file, such as $neon-yellow, $neon-cyan, and $neon-pink for the neon lights, and $night for the background.