steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-22 02:52:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fix dark theme's code block background, line number colors (#1124)

Browse Source 
When customizing `$code-background-color` in `dark.scss`, the result is a multi-color background. (see https://github.com/just-the-docs/just-the-docs/issues/1121#issuecomment-1374976843)

This makes OneDarkJekyll code block colors the same as the specified `$code-background-color`, and uses the `$default-body-color` as the line number text color, which can otherwise be invisible due to the default being black and is hard to see on a very dark code block background.
This commit is contained in:
M. R. McCormick 2023-01-29 20:50:02 -05:00 committed by GitHub
parent c13a5d2cdf
commit 6cdd4f76b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
_sass/code.scss
View File

@ -207,4 +207,21 @@ code.language-mermaid {
border: 0; border: 0;
} }
// Override OneDarkJekyll Colors for Code Blocks
.highlight,
pre.highlight {
background: $code-background-color; // Code Background
// For Backwards Compatibility Before $code-linenumber-color was added
@if variable-exists(code-linenumber-color) {
color: $code-linenumber-color; // Code Line Numbers
} @else {
color: $body-text-color; // Code Line Numbers
}
}
// Override OneDarkJekyll Colors for Code Blocks
.highlight pre {
background: $code-background-color; // Code Background
}
// {% endraw %} // {% endraw %}

12
_sass/color_schemes/dark.scss
View File

@ -15,14 +15,18 @@ $feedback-color: darken($sidebar-color, 3%);
// The following highlight theme is more legible than that used for the light color scheme // The following highlight theme is more legible than that used for the light color scheme
// @import "./vendor/OneDarkJekyll/syntax-one-dark"; // @import "./vendor/OneDarkJekyll/syntax-one-dark";
// $code-background-color: #282c34; // $code-background-color: #282c34; // OneDarkJekyll default for syntax-one-dark
// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-one-dark
@import "./vendor/OneDarkJekyll/syntax-one-dark-vivid"; @import "./vendor/OneDarkJekyll/syntax-one-dark-vivid";
$code-background-color: #31343f; $code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid
$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid
// @import "./vendor/OneDarkJekyll/syntax-firewatch"; // @import "./vendor/OneDarkJekyll/syntax-firewatch";
// $code-background-color: #282c34; // $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch
// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch
// @import "./vendor/OneDarkJekyll/syntax-firewatch-green"; // @import "./vendor/OneDarkJekyll/syntax-firewatch-green";
// $code-background-color: #282c34; // $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch-green
// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch-green