diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index 914265952e..2735bae198 100644
--- a/site/theme/static/demo.less
+++ b/site/theme/static/demo.less
@@ -34,7 +34,12 @@
   &,
   .code-box-demo {
     background-color: @component-background;
-    border-bottom: 1px solid @border-color-base;
+    & when (@theme = dark) {
+      border-bottom: 1px solid @border-color-split-popover;
+    }
+    & when not (@theme = dark) {
+      border-bottom: 1px solid @border-color-base;
+    }
   }
   .markdown {
     code {
@@ -84,7 +89,7 @@
     padding-right: 6px;
     font-size: 12px;
     text-decoration: none;
-    background: #fff;
+    background: inherit;
     transform: scale(0.9);
   }
 
@@ -306,7 +311,7 @@
     width: auto;
     margin: 0;
     code {
-      background: #fff;
+      background: @component-background;
       border: none;
     }
   }
diff --git a/site/theme/static/highlight.less b/site/theme/static/highlight.less
index 06264af5f3..ebb94b50d6 100644
--- a/site/theme/static/highlight.less
+++ b/site/theme/static/highlight.less
@@ -70,7 +70,12 @@ pre[class*='language-'] {
 
 :not(pre) > code[class*='language-'],
 pre[class*='language-'] {
-  background: #f2f4f5;
+  & when (@theme = dark) {
+    background: @component-background;
+  }
+  & when not (@theme = dark) {
+    background: #f2f4f5;
+  }
 }
 
 /* Inline code */