Skip to content
Snippets Groups Projects
Unverified Commit 6cdd4f76 authored by M. R. McCormick's avatar M. R. McCormick Committed by GitHub
Browse files

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

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.
parent c13a5d2c
No related branches found
No related tags found
No related merge requests found
...@@ -207,4 +207,21 @@ code.language-mermaid { ...@@ -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 %}
...@@ -15,14 +15,18 @@ $feedback-color: darken($sidebar-color, 3%); ...@@ -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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment