github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02:33 +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: codeblock:
# Code Highlight theme # Code Highlight theme
# See: https://github.com/highlightjs/highlight.js/tree/master/src/styles # See: https://github.com/highlightjs/highlight.js/tree/master/src/styles
highlight_theme: default theme:
light: default
dark: dark
# Add copy button on codeblock # Add copy button on codeblock
copy_button: copy_button:
enable: false enable: false

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

@ -23,6 +23,10 @@ function parse(file) {
module.exports = hexo => { module.exports = hexo => {
hexo.config.highlight.hljs = false; hexo.config.highlight.hljs = false;
let file = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.highlight_theme}.css`; let light = `${hexo.plugin_dir}highlight.js/styles/${hexo.theme.config.codeblock.theme.light}.css`;
hexo.theme.config.highlight = parse(file); 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-odd-bg-color: $table-row-odd-bg-color;
--table-row-hover-bg-color: $table-row-hover-bg-color; --table-row-hover-bg-color: $table-row-hover-bg-color;
--menu-item-bg-color: $menu-item-bg-color; --menu-item-bg-color: $menu-item-bg-color;
--btn-default-bg: $btn-default-bg; --btn-default-bg: $btn-default-bg;
--btn-default-color: $btn-default-color; --btn-default-color: $btn-default-color;
--btn-default-border-color: $btn-default-border-color; --btn-default-border-color: $btn-default-border-color;
--btn-default-hover-bg: $btn-default-hover-bg; --btn-default-hover-bg: $btn-default-hover-bg;
--btn-default-hover-color: $btn-default-hover-color; --btn-default-hover-color: $btn-default-hover-color;
--btn-default-hover-border-color: $btn-default-hover-border-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')) { 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-odd-bg-color: $table-row-odd-bg-color-dark;
--table-row-hover-bg-color: $table-row-hover-bg-color-dark; --table-row-hover-bg-color: $table-row-hover-bg-color-dark;
--menu-item-bg-color: $menu-item-bg-color-dark; --menu-item-bg-color: $menu-item-bg-color-dark;
--btn-default-bg: $btn-default-bg-dark; --btn-default-bg: $btn-default-bg-dark;
--btn-default-color: $btn-default-color-dark; --btn-default-color: $btn-default-color-dark;
--btn-default-border-color: $btn-default-border-color-dark; --btn-default-border-color: $btn-default-border-color-dark;
--btn-default-hover-bg: $btn-default-hover-bg-dark; --btn-default-hover-bg: $btn-default-hover-bg-dark;
--btn-default-hover-color: $btn-default-hover-color-dark; --btn-default-hover-color: $btn-default-hover-color-dark;
--btn-default-hover-border-color: $btn-default-hover-border-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 { img {

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

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

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

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