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);