diff --git a/web/src/App.tsx b/web/src/App.tsx
index f9f9460..caecd72 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -195,8 +195,8 @@ function App() {
{hasCriticalEvents && (
{simpleToasts.map((toast) => {
const palette = toast.severity === 'ERROR'
- ? { border: 'rgba(239,68,68,0.35)', bg: 'rgba(127,29,29,0.95)', fg: '#fff' }
+ ? { border: 'var(--bl-danger-border, var(--bl-danger))', bg: 'var(--bl-danger-muted)', fg: 'var(--foreground)' }
: toast.severity === 'WARN'
- ? { border: 'rgba(245,158,11,0.35)', bg: 'rgba(120,53,15,0.95)', fg: '#fff' }
- : { border: 'rgba(16,185,129,0.35)', bg: 'rgba(6,78,59,0.95)', fg: '#fff' };
+ ? { border: 'var(--bl-warning-border, var(--bl-warning))', bg: 'var(--bl-warning-muted)', fg: 'var(--foreground)' }
+ : { border: 'var(--bl-success-border, var(--bl-success))', bg: 'var(--bl-success-muted)', fg: 'var(--foreground)' };
return (