github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-18 18:33:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Allow different highlight style for dark mode

Browse Source
This commit is contained in:
Mimi 2020-05-08 14:49:02 +08:00
parent 9fdaba295a
commit 03e50d01ac
6 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
_config.yml
View File

@ -347,7 +347,9 @@ custom_logo: #/uploads/custom-logo.jpg
codeblock:
# Code Highlight theme
# See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
highlight_theme: default
theme:
light: default
dark: dark
# Add copy button on codeblock
copy_button:
enable: false

8
scripts/events/lib/highlight.js
View File

@ -23,6 +23,10 @@ function parse(file) {
module.exports = hexo => {
hexo.config.highlight.hljs = false;
let file = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.highlight_theme}.css`;
hexo.theme.config.highlight = parse(file);
let light = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.light}.css`;
let dark = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.dark}.css`;
hexo.theme.config.highlight = {
light: parse(light),
dark : parse(dark)
};
};

12
source/css/_colors.styl
View File

@ -11,12 +11,18 @@
--table-row-odd-bg-color: $table-row-odd-bg-color;
--table-row-hover-bg-color: $table-row-hover-bg-color;
--menu-item-bg-color: $menu-item-bg-color;
--btn-default-bg: $btn-default-bg;
--btn-default-color: $btn-default-color;
--btn-default-border-color: $btn-default-border-color;
--btn-default-hover-bg: $btn-default-hover-bg;
--btn-default-hover-color: $btn-default-hover-color;
--btn-default-hover-border-color: $btn-default-hover-border-color;
--highlight-background: $highlight-background;
--highlight-foreground: $highlight-foreground;
--highlight-gutter-background: $highlight-gutter-background;
--highlight-gutter-foreground: $highlight-gutter-foreground;
}
if (hexo-config('darkmode')) {
@ -34,12 +40,18 @@ if (hexo-config('darkmode')) {
--table-row-odd-bg-color: $table-row-odd-bg-color-dark;
--table-row-hover-bg-color: $table-row-hover-bg-color-dark;
--menu-item-bg-color: $menu-item-bg-color-dark;
--btn-default-bg: $btn-default-bg-dark;
--btn-default-color: $btn-default-color-dark;
--btn-default-border-color: $btn-default-border-color-dark;
--btn-default-hover-bg: $btn-default-hover-bg-dark;
--btn-default-hover-color: $btn-default-hover-color-dark;
--btn-default-hover-border-color: $btn-default-hover-border-color-dark;
--highlight-background: $highlight-background-dark;
--highlight-foreground: $highlight-foreground-dark;
--highlight-gutter-background: $highlight-gutter-background-dark;
--highlight-gutter-foreground: $highlight-gutter-foreground-dark;
}
img {

2
source/css/_common/scaffolding/highlight/copy-code.styl
View File

@ -18,7 +18,7 @@
right: 0;
top: 0;
} else if (hexo-config('codeblock.copy_button.style') == 'mac') {
color: $highlight-foreground;
color: var(--highlight-foreground);
font-size: 14px;
right: 0;
top: 2px;

34
source/css/_common/scaffolding/highlight/highlight.styl
View File

@ -1,17 +1,17 @@
@import hexo-config('highlight.file');
$highlight-background = convert(hexo-config('highlight.background'));
$highlight-foreground = convert(hexo-config('highlight.foreground'));
$highlight-gutter = {
color: mix($highlight-background, $highlight-foreground, 10%),
bg-color: mix($highlight-background, $highlight-foreground, 90%)
};
@import hexo-config('highlight.light.file');
if (hexo-config('darkmode')) {
@media (prefers-color-scheme: dark) {
@import hexo-config('highlight.dark.file');
}
}
@import 'copy-code' if (hexo-config('codeblock.copy_button.enable'));
// Placeholder: $code-block
$code-block {
background: $highlight-background;
color: $highlight-foreground;
background: var(--highlight-background);
color: var(--highlight-foreground);
line-height: $line-height-code-block;
margin: 0 auto 20px;
}
@ -50,8 +50,8 @@ code {
}
figcaption {
background: $highlight-gutter.bg-color;
color: $highlight-foreground;
background: var(--highlight-gutter-background);
color: var(--highlight-foreground);
display: flex;
font-size: $table-font-size;
justify-content: space-between;
@ -59,10 +59,10 @@ code {
padding: .5em;
a {
color: $highlight-foreground;
color: var(--highlight-foreground);
&:hover {
border-bottom-color: $highlight-foreground;
border-bottom-color: var(--highlight-foreground);
}
}
}
@ -71,8 +71,8 @@ code {
disable-user-select();
pre {
background: $highlight-gutter.bg-color;
color: $highlight-gutter.color;
background: var(--highlight-gutter-background);
color: var(--highlight-gutter-foreground);
padding-left: 10px;
padding-right: 10px;
text-align: right;
@ -80,7 +80,7 @@ code {
}
.code pre {
background: $highlight-background;
background: var(--highlight-background);
padding-left: 10px;
width: 100%;
}
@ -101,7 +101,7 @@ pre {
code {
background: none;
color: $highlight-foreground;
color: var(--highlight-foreground);
font-size: $table-font-size;
padding: 0;
text-shadow: none;

10
source/css/_variables/base.styl
View File

@ -135,6 +135,16 @@ $code-font-family = $font-family-monospace;
$code-foreground = $black-light;
$code-background = $gainsboro;
$highlight-background = convert(hexo-config('highlight.light.background'));
$highlight-foreground = convert(hexo-config('highlight.light.foreground'));
$highlight-gutter-background = mix($highlight-background, $highlight-foreground, 90%);
$highlight-gutter-foreground = mix($highlight-background, $highlight-foreground, 10%);
$highlight-background-dark = convert(hexo-config('highlight.dark.background'));
$highlight-foreground-dark = convert(hexo-config('highlight.dark.foreground'));
$highlight-gutter-background-dark = mix($highlight-background-dark, $highlight-foreground-dark, 90%);
$highlight-gutter-foreground-dark = mix($highlight-background-dark, $highlight-foreground-dark, 10%);
// Buttons
// --------------------------------------------------