From 578de37392e68cf61732bcf757bab897cc42f137 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Thu, 22 Sep 2022 00:46:26 +0200
Subject: [PATCH] Add night version of the output scrollbar (#1613)

---
 assets/css/content/code.css             | 6 +++---
 assets/css/custom-props/theme-dark.css  | 2 ++
 assets/css/custom-props/theme-light.css | 2 ++
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/assets/css/content/code.css b/assets/css/content/code.css
index c51f92165..35274dd63 100644
--- a/assets/css/content/code.css
+++ b/assets/css/content/code.css
@@ -37,15 +37,15 @@
 
 .content-inner pre code::-webkit-scrollbar-thumb {
   border-radius: 0.25rem;
-  background-color: var(--gray300);
+  background-color: var(--codeScrollThumb);
 }
 
 .content-inner pre code::-webkit-scrollbar-track {
-  background-color: var(--gray100);
+  background-color: var(--codeScrollBackground);
 }
 
 .content-inner pre code::-webkit-scrollbar-corner {
-  background-color: var(--gray100);
+  background-color: var(--codeScrollBackground);
 }
 
 .content-inner pre code.output {
diff --git a/assets/css/custom-props/theme-dark.css b/assets/css/custom-props/theme-dark.css
index 8bbc1320d..6c7cc84fe 100644
--- a/assets/css/custom-props/theme-dark.css
+++ b/assets/css/custom-props/theme-dark.css
@@ -41,6 +41,8 @@ body.dark {
   --codeBorder:                  var(--gray700);
   --inlineCodeBackground:        var(--gray50);
   --inlineCodeBorder:            var(--gray100);
+  --codeScrollThumb:             var(--gray500);
+  --codeScrollBackground:        var(--codeBorder);
 
   --bottomActionsBtnBorder:      var(--white-opacity-10);
   --bottomActionsBtnSubheader:   var(--main);
diff --git a/assets/css/custom-props/theme-light.css b/assets/css/custom-props/theme-light.css
index 3a80bf758..b135c1c03 100644
--- a/assets/css/custom-props/theme-light.css
+++ b/assets/css/custom-props/theme-light.css
@@ -41,6 +41,8 @@
   --codeBorder:                  var(--gray100);
   --inlineCodeBackground:        var(--codeBackground);
   --inlineCodeBorder:            var(--codeBorder);
+  --codeScrollThumb:             var(--gray300);
+  --codeScrollBackground:        var(--codeBorder);
 
   --bottomActionsBtnBorder:      var(--black-opacity-10);
   --bottomActionsBtnSubheader:   var(--main-darkened-10);