diff --git a/src/contentScripts/views/App.vue b/src/contentScripts/views/App.vue
index 0ead8763..996558da 100644
--- a/src/contentScripts/views/App.vue
+++ b/src/contentScripts/views/App.vue
@@ -153,13 +153,9 @@ function setAppThemeColor() {
   const bewlyElement = document.querySelector('#bewly') as HTMLElement
   if (bewlyElement) {
     bewlyElement.style.setProperty('--bew-theme-color', settings.value.themeColor)
-    for (let i = 0; i < 9; i++)
-      bewlyElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToHSL(settings.value.themeColor, i * 0.1 + 0.1))
   }
 
   document.documentElement.style.setProperty('--bew-theme-color', settings.value.themeColor)
-  for (let i = 0; i < 9; i++)
-    document.documentElement.style.setProperty(`--bew-theme-color-${i + 1}0`, hexToHSL(settings.value.themeColor, i * 0.1 + 0.1))
 }
 
 function handleBackToTop(targetScrollTop = 0 as number) {
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 479ad234..f5b6f5d3 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -56,59 +56,59 @@
   --bew-theme-color-auto: var(--bew-theme-color);
 
   --bew-theme-color: hsl(195 100% 42%);
-  --bew-theme-color-10: hsl(195 100% 42% / 0.1);
-  --bew-theme-color-20: hsl(195 100% 42% / 0.2);
-  --bew-theme-color-30: hsl(195 100% 42% / 0.3);
-  --bew-theme-color-40: hsl(195 100% 42% / 0.4);
-  --bew-theme-color-50: hsl(195 100% 42% / 0.5);
-  --bew-theme-color-60: hsl(195 100% 42% / 0.6);
-  --bew-theme-color-70: hsl(195 100% 42% / 0.7);
-  --bew-theme-color-80: hsl(195 100% 42% / 0.8);
-  --bew-theme-color-90: hsl(195 100% 42% / 0.9);
+  --bew-theme-color-10: color-mix(in oklab, var(--bew-theme-color), transparent 10%);
+  --bew-theme-color-20: color-mix(in oklab, var(--bew-theme-color), transparent 20%);
+  --bew-theme-color-30: color-mix(in oklab, var(--bew-theme-color), transparent 30%);
+  --bew-theme-color-40: color-mix(in oklab, var(--bew-theme-color), transparent 40%);
+  --bew-theme-color-50: color-mix(in oklab, var(--bew-theme-color), transparent 50%);
+  --bew-theme-color-60: color-mix(in oklab, var(--bew-theme-color), transparent 60%);
+  --bew-theme-color-70: color-mix(in oklab, var(--bew-theme-color), transparent 70%);
+  --bew-theme-color-80: color-mix(in oklab, var(--bew-theme-color), transparent 80%);
+  --bew-theme-color-90: color-mix(in oklab, var(--bew-theme-color), transparent 90%);
 
   --bew-info-color: hsl(198 93% 60%);
-  --bew-info-color-10: hsl(198 93% 60% / 0.1);
-  --bew-info-color-20: hsl(198 93% 60% / 0.2);
-  --bew-info-color-30: hsl(198 93% 60% / 0.3);
-  --bew-info-color-40: hsl(198 93% 60% / 0.4);
-  --bew-info-color-50: hsl(198 93% 60% / 0.5);
-  --bew-info-color-60: hsl(198 93% 60% / 0.6);
-  --bew-info-color-70: hsl(198 93% 60% / 0.7);
-  --bew-info-color-80: hsl(198 93% 60% / 0.8);
-  --bew-info-color-90: hsl(198 93% 60% / 0.9);
+  --bew-info-color-10: color-mix(in oklab, var(--bew-info-color), transparent 10%);
+  --bew-info-color-20: color-mix(in oklab, var(--bew-info-color), transparent 20%);
+  --bew-info-color-30: color-mix(in oklab, var(--bew-info-color), transparent 30%);
+  --bew-info-color-40: color-mix(in oklab, var(--bew-info-color), transparent 40%);
+  --bew-info-color-50: color-mix(in oklab, var(--bew-info-color), transparent 50%);
+  --bew-info-color-60: color-mix(in oklab, var(--bew-info-color), transparent 60%);
+  --bew-info-color-70: color-mix(in oklab, var(--bew-info-color), transparent 70%);
+  --bew-info-color-80: color-mix(in oklab, var(--bew-info-color), transparent 80%);
+  --bew-info-color-90: color-mix(in oklab, var(--bew-info-color), transparent 90%);
 
   --bew-success-color: hsl(164 60% 40%);
-  --bew-success-color-10: hsl(164 60% 40% / 0.1);
-  --bew-success-color-20: hsl(164 60% 40% / 0.2);
-  --bew-success-color-30: hsl(164 60% 40% / 0.3);
-  --bew-success-color-40: hsl(164 60% 40% / 0.4);
-  --bew-success-color-50: hsl(164 60% 40% / 0.5);
-  --bew-success-color-60: hsl(164 60% 40% / 0.6);
-  --bew-success-color-70: hsl(164 60% 40% / 0.7);
-  --bew-success-color-80: hsl(164 60% 40% / 0.8);
-  --bew-success-color-90: hsl(164 60% 40% / 0.9);
+  --bew-success-color-10: color-mix(in oklab, var(--bew-success-color), transparent 10%);
+  --bew-success-color-20: color-mix(in oklab, var(--bew-success-color), transparent 20%);
+  --bew-success-color-30: color-mix(in oklab, var(--bew-success-color), transparent 30%);
+  --bew-success-color-40: color-mix(in oklab, var(--bew-success-color), transparent 40%);
+  --bew-success-color-50: color-mix(in oklab, var(--bew-success-color), transparent 50%);
+  --bew-success-color-60: color-mix(in oklab, var(--bew-success-color), transparent 60%);
+  --bew-success-color-70: color-mix(in oklab, var(--bew-success-color), transparent 70%);
+  --bew-success-color-80: color-mix(in oklab, var(--bew-success-color), transparent 80%);
+  --bew-success-color-90: color-mix(in oklab, var(--bew-success-color), transparent 90%);
 
   --bew-warning-color: hsl(48 90% 53%);
-  --bew-warning-color-10: hsl(48 90% 53% / 0.1);
-  --bew-warning-color-20: hsl(48 90% 53% / 0.2);
-  --bew-warning-color-30: hsl(48 90% 53% / 0.3);
-  --bew-warning-color-40: hsl(48 90% 53% / 0.4);
-  --bew-warning-color-50: hsl(48 90% 53% / 0.5);
-  --bew-warning-color-60: hsl(48 90% 53% / 0.6);
-  --bew-warning-color-70: hsl(48 90% 53% / 0.7);
-  --bew-warning-color-80: hsl(48 90% 53% / 0.8);
-  --bew-warning-color-90: hsl(48 90% 53% / 0.9);
+  --bew-warning-color-10: color-mix(in oklab, var(--bew-warning-color), transparent 10%);
+  --bew-warning-color-20: color-mix(in oklab, var(--bew-warning-color), transparent 20%);
+  --bew-warning-color-30: color-mix(in oklab, var(--bew-warning-color), transparent 30%);
+  --bew-warning-color-40: color-mix(in oklab, var(--bew-warning-color), transparent 40%);
+  --bew-warning-color-50: color-mix(in oklab, var(--bew-warning-color), transparent 50%);
+  --bew-warning-color-60: color-mix(in oklab, var(--bew-warning-color), transparent 60%);
+  --bew-warning-color-70: color-mix(in oklab, var(--bew-warning-color), transparent 70%);
+  --bew-warning-color-80: color-mix(in oklab, var(--bew-warning-color), transparent 80%);
+  --bew-warning-color-90: color-mix(in oklab, var(--bew-warning-color), transparent 90%);
 
   --bew-error-color: hsl(358 75% 59%);
-  --bew-error-color-10: hsl(358 75% 59% / 0.1);
-  --bew-error-color-20: hsl(358 75% 59% / 0.2);
-  --bew-error-color-30: hsl(358 75% 59% / 0.3);
-  --bew-error-color-40: hsl(358 75% 59% / 0.4);
-  --bew-error-color-50: hsl(358 75% 59% / 0.5);
-  --bew-error-color-60: hsl(358 75% 59% / 0.6);
-  --bew-error-color-70: hsl(358 75% 59% / 0.7);
-  --bew-error-color-80: hsl(358 75% 59% / 0.8);
-  --bew-error-color-90: hsl(358 75% 59% / 0.9);
+  --bew-error-color-10: color-mix(in oklab, var(--bew-error-color), transparent 10%);
+  --bew-error-color-20: color-mix(in oklab, var(--bew-error-color), transparent 20%);
+  --bew-error-color-30: color-mix(in oklab, var(--bew-error-color), transparent 30%);
+  --bew-error-color-40: color-mix(in oklab, var(--bew-error-color), transparent 40%);
+  --bew-error-color-50: color-mix(in oklab, var(--bew-error-color), transparent 50%);
+  --bew-error-color-60: color-mix(in oklab, var(--bew-error-color), transparent 60%);
+  --bew-error-color-70: color-mix(in oklab, var(--bew-error-color), transparent 70%);
+  --bew-error-color-80: color-mix(in oklab, var(--bew-error-color), transparent 80%);
+  --bew-error-color-90: color-mix(in oklab, var(--bew-error-color), transparent 90%);
   // #endregion
 
   // #region Text colors