diff --git a/assets/scss/code.scss b/assets/scss/code.scss
index 1f48096..1c7dda1 100644
--- a/assets/scss/code.scss
+++ b/assets/scss/code.scss
@@ -69,7 +69,7 @@ pre code {
 
     .hl {
         display: block;
-        background-color: #fffd99; 
+        @include var(background-color, code-highlight-color);
 
         .lnt::before {
             content: "*";
diff --git a/assets/scss/modes.scss b/assets/scss/modes.scss
index b6adcd6..90932a7 100644
--- a/assets/scss/modes.scss
+++ b/assets/scss/modes.scss
@@ -17,5 +17,6 @@
         --code-color: #{$code-color-dark};
         --code-keyword-color: #{$code-token-color-dark};
         --code-type-color: #{$code-token-color-dark};
+        --code-highlight-color: #{$code-highlight-color-dark};
     }
 }
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index fd4c91f..4057a2a 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -25,6 +25,8 @@ $code-color: #f0f0f0;
 $code-color-dark: lighten($background-color-dark, 10%);
 $code-token-color: black;
 $code-token-color-dark: darken(white, 40%);
+$code-highlight-color: #fffd99;
+$code-highlight-color-dark: #555538;
 $code-border-color: darken($code-color, 10%);
 $code-lineno-color: grey;
 $code-comment-color: grey;
@@ -52,6 +54,7 @@ $css-vars: (
     code-color: $code-color,
     code-keyword-color: $code-token-color,
     code-type-color: $code-token-color,
+    code-highlight-color: $code-highlight-color,
 );
 
 @mixin var($property, $varName) {