diff --git a/src/css/main.css b/src/css/main.css
index 702840d..a944074 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -83,6 +83,7 @@
   --header-bg:           rgba(10,6,14,0.90);
   --board-hover-border-pct: 22%;
   --logo-shadow-pct:        45%;
+  --toggle-on-bg-pct:    20%;
   --board-hover-border:  color-mix(in srgb, var(--accent) var(--board-hover-border-pct), transparent);
   --toggle-on-bg:        rgba(214,92,255,0.22);
   --logo-shadow:         color-mix(in srgb, var(--accent) var(--logo-shadow-pct), transparent);
@@ -297,7 +298,7 @@
                            rgba(26,15,8,0.15) 50%,
                            rgba(26,15,8,0.90) 100%);
   --header-bg:           rgba(26,15,8,0.95);
-  --toggle-on-bg:        rgba(0, 180, 216, 0.20);
+  --toggle-on-bg:        color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent);
   --bg-solid-fallback:   #1a0f08;
 }
 
@@ -320,7 +321,8 @@
                            transparent 0%,
                            rgba(2, 13, 12, 0.95) 100%);
   --header-bg:           rgba(2, 13, 12, 0.94);
-  --toggle-on-bg:        rgba(46, 196, 160, 0.18);
+  --toggle-on-bg-pct:    18%;
+  --toggle-on-bg:        color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent);
   --bg-solid-fallback:   #020d0c;
 }
 
@@ -343,7 +345,7 @@
                            transparent 0%,
                            rgba(13, 15, 18, 0.90) 100%);
   --header-bg:           rgba(13, 15, 18, 0.96);
-  --toggle-on-bg:        rgba(94, 194, 255, 0.20);
+  --toggle-on-bg:        color-mix(in srgb, var(--accent) var(--toggle-on-bg-pct), transparent);
   --bg-solid-fallback:   #0d0f12;
 }
 }