Skip to content

Commit 03e50d0

Browse files
committedMay 8, 2020
Allow different highlight style for dark mode
1 parent 9fdaba2 commit 03e50d0

File tree

6 files changed

+49
-21
lines changed

6 files changed

+49
-21
lines changed
 

‎_config.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -347,7 +347,9 @@ custom_logo: #/uploads/custom-logo.jpg
347347
codeblock:
348348
# Code Highlight theme
349349
# See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
350-
highlight_theme: default
350+
theme:
351+
light: default
352+
dark: dark
351353
# Add copy button on codeblock
352354
copy_button:
353355
enable: false

‎scripts/events/lib/highlight.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ function parse(file) {
2323

2424
module.exports = hexo => {
2525
hexo.config.highlight.hljs = false;
26-
let file = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.highlight_theme}.css`;
27-
hexo.theme.config.highlight = parse(file);
26+
let light = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.light}.css`;
27+
let dark = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.dark}.css`;
28+
hexo.theme.config.highlight = {
29+
light: parse(light),
30+
dark : parse(dark)
31+
};
2832
};

‎source/css/_colors.styl

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,18 @@
1111
--table-row-odd-bg-color: $table-row-odd-bg-color;
1212
--table-row-hover-bg-color: $table-row-hover-bg-color;
1313
--menu-item-bg-color: $menu-item-bg-color;
14+
1415
--btn-default-bg: $btn-default-bg;
1516
--btn-default-color: $btn-default-color;
1617
--btn-default-border-color: $btn-default-border-color;
1718
--btn-default-hover-bg: $btn-default-hover-bg;
1819
--btn-default-hover-color: $btn-default-hover-color;
1920
--btn-default-hover-border-color: $btn-default-hover-border-color;
21+
22+
--highlight-background: $highlight-background;
23+
--highlight-foreground: $highlight-foreground;
24+
--highlight-gutter-background: $highlight-gutter-background;
25+
--highlight-gutter-foreground: $highlight-gutter-foreground;
2026
}
2127

2228
if (hexo-config('darkmode')) {
@@ -34,12 +40,18 @@ if (hexo-config('darkmode')) {
3440
--table-row-odd-bg-color: $table-row-odd-bg-color-dark;
3541
--table-row-hover-bg-color: $table-row-hover-bg-color-dark;
3642
--menu-item-bg-color: $menu-item-bg-color-dark;
43+
3744
--btn-default-bg: $btn-default-bg-dark;
3845
--btn-default-color: $btn-default-color-dark;
3946
--btn-default-border-color: $btn-default-border-color-dark;
4047
--btn-default-hover-bg: $btn-default-hover-bg-dark;
4148
--btn-default-hover-color: $btn-default-hover-color-dark;
4249
--btn-default-hover-border-color: $btn-default-hover-border-color-dark;
50+
51+
--highlight-background: $highlight-background-dark;
52+
--highlight-foreground: $highlight-foreground-dark;
53+
--highlight-gutter-background: $highlight-gutter-background-dark;
54+
--highlight-gutter-foreground: $highlight-gutter-foreground-dark;
4355
}
4456

4557
img {

‎source/css/_common/scaffolding/highlight/copy-code.styl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
right: 0;
1919
top: 0;
2020
} else if (hexo-config('codeblock.copy_button.style') == 'mac') {
21-
color: $highlight-foreground;
21+
color: var(--highlight-foreground);
2222
font-size: 14px;
2323
right: 0;
2424
top: 2px;

‎source/css/_common/scaffolding/highlight/highlight.styl

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
@import hexo-config('highlight.file');
2-
$highlight-background = convert(hexo-config('highlight.background'));
3-
$highlight-foreground = convert(hexo-config('highlight.foreground'));
4-
$highlight-gutter = {
5-
color: mix($highlight-background, $highlight-foreground, 10%),
6-
bg-color: mix($highlight-background, $highlight-foreground, 90%)
7-
};
1+
@import hexo-config('highlight.light.file');
2+
3+
if (hexo-config('darkmode')) {
4+
@media (prefers-color-scheme: dark) {
5+
@import hexo-config('highlight.dark.file');
6+
}
7+
}
88

99
@import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
1010

1111
// Placeholder: $code-block
1212
$code-block {
13-
background: $highlight-background;
14-
color: $highlight-foreground;
13+
background: var(--highlight-background);
14+
color: var(--highlight-foreground);
1515
line-height: $line-height-code-block;
1616
margin: 0 auto 20px;
1717
}
@@ -50,19 +50,19 @@ code {
5050
}
5151

5252
figcaption {
53-
background: $highlight-gutter.bg-color;
54-
color: $highlight-foreground;
53+
background: var(--highlight-gutter-background);
54+
color: var(--highlight-foreground);
5555
display: flex;
5656
font-size: $table-font-size;
5757
justify-content: space-between;
5858
line-height: 1.2;
5959
padding: .5em;
6060

6161
a {
62-
color: $highlight-foreground;
62+
color: var(--highlight-foreground);
6363

6464
&:hover {
65-
border-bottom-color: $highlight-foreground;
65+
border-bottom-color: var(--highlight-foreground);
6666
}
6767
}
6868
}
@@ -71,16 +71,16 @@ code {
7171
disable-user-select();
7272

7373
pre {
74-
background: $highlight-gutter.bg-color;
75-
color: $highlight-gutter.color;
74+
background: var(--highlight-gutter-background);
75+
color: var(--highlight-gutter-foreground);
7676
padding-left: 10px;
7777
padding-right: 10px;
7878
text-align: right;
7979
}
8080
}
8181

8282
.code pre {
83-
background: $highlight-background;
83+
background: var(--highlight-background);
8484
padding-left: 10px;
8585
width: 100%;
8686
}
@@ -101,7 +101,7 @@ pre {
101101

102102
code {
103103
background: none;
104-
color: $highlight-foreground;
104+
color: var(--highlight-foreground);
105105
font-size: $table-font-size;
106106
padding: 0;
107107
text-shadow: none;

‎source/css/_variables/base.styl

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,16 @@ $code-font-family = $font-family-monospace;
135135
$code-foreground = $black-light;
136136
$code-background = $gainsboro;
137137

138+
$highlight-background = convert(hexo-config('highlight.light.background'));
139+
$highlight-foreground = convert(hexo-config('highlight.light.foreground'));
140+
$highlight-gutter-background = mix($highlight-background, $highlight-foreground, 90%);
141+
$highlight-gutter-foreground = mix($highlight-background, $highlight-foreground, 10%);
142+
143+
$highlight-background-dark = convert(hexo-config('highlight.dark.background'));
144+
$highlight-foreground-dark = convert(hexo-config('highlight.dark.foreground'));
145+
$highlight-gutter-background-dark = mix($highlight-background-dark, $highlight-foreground-dark, 90%);
146+
$highlight-gutter-foreground-dark = mix($highlight-background-dark, $highlight-foreground-dark, 10%);
147+
138148

139149
// Buttons
140150
// --------------------------------------------------

1 commit comments

Comments
 (1)

stevenjoezhang commented on Nov 29, 2020

@stevenjoezhang
MemberAuthor
Please sign in to comment.