diff --git a/src/scss/layout/_dark.scss b/src/scss/layout/_dark.scss
index 850c039e9..2939c6dae 100644
--- a/src/scss/layout/_dark.scss
+++ b/src/scss/layout/_dark.scss
@@ -38,6 +38,10 @@ body:not(.theme-dark) .hide-theme-light {
     --#{$prefix}code-color: var(--#{$prefix}body-color);
     --#{$prefix}code-bg: #{$dark-mode-border-color-light};
 
+    @each $color, $value in $theme-colors {
+      --#{$prefix}#{$color}-lt-rgb: #{to-rgb(theme-color-lighter($value, $dark))};
+    }
+
     color: $dark-mode-text;
     background-color: $dark-mode-darken;
   }
diff --git a/src/scss/layout/_root.scss b/src/scss/layout/_root.scss
index 66929d97c..40c78eac7 100644
--- a/src/scss/layout/_root.scss
+++ b/src/scss/layout/_root.scss
@@ -4,12 +4,12 @@
   height: 100%;
 
   @each $name, $color in map-merge($theme-colors, $gray-colors) {
-    --#{$prefix}#{$name}: #{$color};
+    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
+    --#{$prefix}#{$name}: rgb(--#{$prefix}#{$name}-rgb);
     --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
     --#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
-    --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
-    --#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
     --#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
+    --#{$prefix}#{$name}-lt: rgb(var(--#{$prefix}#{$name}-lt-rgb));
   }
 
   --#{$prefix}bg-surface: #{$bg-surface};
diff --git a/src/scss/mixins/_functions.scss b/src/scss/mixins/_functions.scss
index 02bd26926..0fd2ac2ec 100644
--- a/src/scss/mixins/_functions.scss
+++ b/src/scss/mixins/_functions.scss
@@ -1,9 +1,5 @@
-@function theme-color-lighter($color, $transparent: false) {
-  @if ($transparent) {
-    @return rgba($color, .1);
-  } @else {
-    @return tint-color($color, 90%);
-  }
+@function theme-color-lighter($color, $background: #fff) {
+  @return mix($color, $background, 10%);
 }
 
 @function theme-color-darker($color) {