Style a New Skin of Jekyll Theme Minimal Mistakes
Introduction
Jekyll theme “minimal-mistakes” 1 provides nine optional skins 2, and we could specify it in _config.yml:
1
minimal_mistakes_skin : "air" # "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
These skins are defined by .scss files (SCSS, i.e., Sassy Cascading Style Sheets, is a more advanced and evolved variant of the CSS language 3, and these files, named _<name>.scss, are stored in the .\_sass\minimal-mistakes\skins folder. For example, .\_sass\minimal-mistakes\skins\_air.scss file is like:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* ==========================================================================
Air skin
========================================================================== */
/* Colors */
$background-color: #eeeeee !default;
$text-color: #222831 !default;
$muted-text-color: #393e46 !default;
$primary-color: #0092ca !default;
$border-color: mix(#fff, #393e46, 75%) !default;
$footer-background-color: $primary-color !default;
$link-color: #393e46 !default;
$masthead-link-color: $text-color !default;
$masthead-link-color-hover: $text-color !default;
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
.page__footer {
color: #fff !important; // override
}
.page__footer-follow .social-icons .svg-inline--fa {
color: inherit;
}
As can be seen, the .scss file mainly defines some colour settings of website components.
Create _myskin.scss on Oct. 24, 2023
On Oct. 24, 2023, I make a copy of _air.scss and renamed it as _myskin.scss, and in which I changed colour settings of background-color, link-color, primary-color, and text-color. The complete code shows as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* ==========================================================================
myskin skin, modified from Air skin, available from Oct. 24, 2023.
Oct. 24, 2023:
background-color: #eeeeee -> #ffffff;
link-color: #393e46 -> #0076A8 -> #3366CC ;
primary-color: #0092ca -> #0076A8;
text-color: #222831 -> #000000;
========================================================================== */
/* Colors */
$background-color: #ffffff !default;
$link-color: #3366CC !default;
$primary-color: #0076A8 !default;
$text-color: #000000 !default;
$muted-text-color: #393e46 !default;
$border-color: mix(#fff, #393e46, 75%) !default;
$footer-background-color: $primary-color !default;
$masthead-link-color: $text-color !default;
$masthead-link-color-hover: $text-color !default;
$navicon-link-color-hover: mix(#fff, $text-color, 80%) !default;
.page__footer {
color: #fff !important; // override
}
.page__footer-follow .social-icons .svg-inline--fa {
color: inherit;
}
Afterwards, changing the corresponding option in _config.yml:
1
minimal_mistakes_skin : "myskin"
will make it work.
Change the color matching of code block
Added on Nov. 14, 2023.
Adding the following code in the _myskin.scss will make the color matching of code block the same as that of "contrast" skin:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* contrast syntax highlighting (base16) */
$base00: #000000;
$base01: #242422;
$base02: #484844;
$base03: #6c6c66;
$base04: #918f88;
$base05: #b5b3aa;
$base06: #d9d7cc;
$base07: #fdfbee;
$base08: #ff6c60;
$base09: #e9c062;
$base0a: #ffffb6;
$base0b: #a8ff60;
$base0c: #c6c5fe;
$base0d: #96cbfe;
$base0e: #ff73fd;
$base0f: #b18a3d;
i.e., changing from:
to:
The detailed information could be found in references 4 and 5.
References