2020-04-05 01:54:59 +00:00
|
|
|
title: Cyberpunk Theme Variant
|
2020-08-24 06:58:52 +00:00
|
|
|
date: 2020-02-01
|
2020-04-05 01:54:59 +00:00
|
|
|
tags:
|
|
|
|
|
- Demo
|
|
|
|
|
variant: cyberpunk
|
|
|
|
|
article:
|
|
|
|
|
highlight:
|
|
|
|
|
theme: qtcreator_dark
|
2020-04-11 21:45:01 +00:00
|
|
|
sidebar:
|
|
|
|
|
left:
|
|
|
|
|
sticky: false
|
|
|
|
|
right:
|
|
|
|
|
sticky: false
|
|
|
|
|
widgets:
|
|
|
|
|
-
|
|
|
|
|
position: left
|
|
|
|
|
type: profile
|
|
|
|
|
author: PPOffice
|
|
|
|
|
author_title: Web Developer
|
|
|
|
|
location: Earth, Solar System
|
|
|
|
|
follow_link: 'https://github.com/ppoffice'
|
|
|
|
|
social_links:
|
|
|
|
|
Github:
|
|
|
|
|
icon: fab fa-github
|
|
|
|
|
url: 'https://github.com/ppoffice'
|
|
|
|
|
Facebook:
|
|
|
|
|
icon: fab fa-facebook
|
|
|
|
|
url: 'https://facebook.com'
|
|
|
|
|
Twitter:
|
|
|
|
|
icon: fab fa-twitter
|
|
|
|
|
url: 'https://twitter.com'
|
|
|
|
|
Dribbble:
|
|
|
|
|
icon: fab fa-dribbble
|
|
|
|
|
url: 'https://dribbble.com'
|
|
|
|
|
RSS:
|
|
|
|
|
icon: fas fa-rss
|
|
|
|
|
url: /
|
|
|
|
|
-
|
|
|
|
|
position: left
|
|
|
|
|
type: links
|
|
|
|
|
links:
|
|
|
|
|
Hexo: 'https://hexo.io'
|
|
|
|
|
Bulma: 'https://bulma.io'
|
|
|
|
|
-
|
|
|
|
|
position: left
|
|
|
|
|
type: categories
|
|
|
|
|
-
|
|
|
|
|
position: right
|
|
|
|
|
type: recent_posts
|
|
|
|
|
-
|
|
|
|
|
position: right
|
|
|
|
|
type: archives
|
|
|
|
|
-
|
|
|
|
|
position: right
|
|
|
|
|
type: tags
|
2020-08-24 06:58:52 +00:00
|
|
|
cover: /gallery/covers/CP77-KV-en.jpg
|
|
|
|
|
thumbnail: /gallery/covers/CP77-KV-en.jpg
|
2020-04-05 01:54:59 +00:00
|
|
|
---
|
|
|
|
|
|
|
|
|
|
Icarus includes a new variant called Cyberpunk starting from version 3.0.0.
|
|
|
|
|
The theme is inspired by the video game [Cyberpunk 2077](https://www.cyberpunk.net/us/en/)
|
|
|
|
|
developed by CD PROJEKT RED.
|
|
|
|
|
This variant aims at providing a different Icarus experience to these who like dark-themed
|
|
|
|
|
blogs.
|
2020-05-02 15:10:14 +00:00
|
|
|
It should be noted that it uses recent web styling features that are not working correctly
|
2020-04-05 01:54:59 +00:00
|
|
|
in some legacy browsers, including Internet Explorer and legacy Microsoft Edge.
|
|
|
|
|
|
|
|
|
|
<!-- more -->
|
|
|
|
|
|
2020-05-02 15:10:14 +00:00
|
|
|
To enable the Cyberpunk theme, open your theme's `_config.yml` and make the following change:
|
2020-04-05 01:54:59 +00:00
|
|
|
|
|
|
|
|
{% codeblock themes/icarus/_config.yml lang:diff %}
|
|
|
|
|
- variant: default
|
|
|
|
|
+ variant: cyberpunk
|
|
|
|
|
{% endcodeblock %}
|
|
|
|
|
|
|
|
|
|
You may also want to change the theme of highlighted code blocks.
|
|
|
|
|
In that case, you can find some dark highlight.js themes
|
|
|
|
|
[here](https://github.com/highlightjs/highlight.js/tree/master/src/styles).
|
2020-05-02 15:10:14 +00:00
|
|
|
Copy the file name, excluding the `.css` extension, and put it in the `article.highlight.theme`
|
2020-04-05 01:54:59 +00:00
|
|
|
option in Icarus' `_config.yml`.
|
2020-05-02 15:10:14 +00:00
|
|
|
For example, if you want to change the theme to `xt256`, make the following change:
|
2020-04-05 01:54:59 +00:00
|
|
|
|
|
|
|
|
{% codeblock themes/icarus/_config.yml lang:diff %}
|
|
|
|
|
# Article related configurations
|
|
|
|
|
article:
|
|
|
|
|
highlight:
|
|
|
|
|
- theme: atom-one-light
|
|
|
|
|
+ theme: xt256
|
|
|
|
|
{% endcodeblock %}
|
|
|
|
|
|
2020-05-02 15:10:14 +00:00
|
|
|
Apart from the color palette, Icarus also used two image resources that are placed on the top
|
|
|
|
|
navigation bar and bottom page footer from the official Cyberpunk 2077 website.
|
|
|
|
|
If you wish to make further modifications to this theme variant, you can take a look at
|
2020-04-05 01:54:59 +00:00
|
|
|
`themes/icarus/source/css/cyberpunk.styl`.
|
