From 6cdd4f76b5adba17c9e4562cafb32eaf9bdd4a3e Mon Sep 17 00:00:00 2001
From: "M. R. McCormick" <100036696+m-r-mccormick@users.noreply.github.com>
Date: Sun, 29 Jan 2023 20:50:02 -0500
Subject: [PATCH] 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.
---
_sass/code.scss | 17 +++++++++++++++++
_sass/color_schemes/dark.scss | 12 ++++++++----
2 files changed, 25 insertions(+), 4 deletions(-)
diff --git a/_sass/code.scss b/_sass/code.scss
index ee8a1f05..759faa33 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -207,4 +207,21 @@ code.language-mermaid {
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 %}
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index a0ff4cb3..e1952f6d 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -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
// @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";
-$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";
-// $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";
-// $code-background-color: #282c34;
+// $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch-green
+// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch-green
--
GitLab