Add night version of the output scrollbar (#1613)

elixir-lang · Sep 21, 2022 · 578de37 · 578de37
1 parent 04a5886
commit 578de37
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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);