diff --git a/code/frontend/src/styles/_animations.scss b/code/frontend/src/styles/_animations.scss
index 6f5c3f34..129d9dce 100644
--- a/code/frontend/src/styles/_animations.scss
+++ b/code/frontend/src/styles/_animations.scss
@@ -131,6 +131,7 @@
   --glass-blur-sm: 0px;
   --glass-blur-lg: 0px;
   --glass-shadow: none;
+  --surface-elevated: #1e1232;
   --duration-fast: 0ms;
   --duration-normal: 0ms;
   --duration-slow: 0ms;
@@ -142,6 +143,11 @@
   -webkit-backdrop-filter: none !important;
 }
 
+:root[data-performance-mode='true'][data-theme='light'],
+:root[data-performance-mode='true'][data-theme='light'] *:not([role='status']):not([role='status'] *) {
+  --surface-elevated: #ffffff;
+}
+
 :root[data-performance-mode='true'] .shell__main::before,
 :root[data-performance-mode='true'] .shell__main::after,
 :root[data-performance-mode='true'] .shell::after {
@@ -154,11 +160,16 @@
     --glass-blur-sm: 0px;
     --glass-blur-lg: 0px;
     --glass-shadow: none;
+    --surface-elevated: #1e1232;
     --duration-fast: 0ms;
     --duration-normal: 0ms;
     --duration-slow: 0ms;
   }
 
+  :root[data-theme='light'] {
+    --surface-elevated: #ffffff;
+  }
+
   *:not([role='status']):not([role='status'] *),
   *:not([role='status']):not([role='status'] *)::before,
   *:not([role='status']):not([role='status'] *)::after {