fix notifications background

Signed-off-by: Hadi <[email protected]>

dist/chunk-fqzxyvhv.js

@@ -52,19 +52,21 @@ function NotificationHost(props = {}) {
           _$insert(_el$3, () => toast.title ?? KIND_LABEL[toast.kind]);
           _$insert(_el$4, () => toast.message);
           _$effect((_p$) => {
-            var _v$ = theme.borderStyle, _v$2 = colorFor(toast.kind), _v$3 = props.width ?? 32, _v$4 = theme.mouse ? () => dismiss(toast.id) : undefined, _v$5 = colorFor(toast.kind);
+            var _v$ = theme.borderStyle, _v$2 = colorFor(toast.kind), _v$3 = props.backgroundColor ?? theme.background, _v$4 = props.width ?? 32, _v$5 = theme.mouse ? () => dismiss(toast.id) : undefined, _v$6 = colorFor(toast.kind);
             _v$ !== _p$.e && (_p$.e = _$setProp(_el$2, "borderStyle", _v$, _p$.e));
             _v$2 !== _p$.t && (_p$.t = _$setProp(_el$2, "borderColor", _v$2, _p$.t));
-            _v$3 !== _p$.a && (_p$.a = _$setProp(_el$2, "width", _v$3, _p$.a));
-            _v$4 !== _p$.o && (_p$.o = _$setProp(_el$2, "onMouseDown", _v$4, _p$.o));
-            _v$5 !== _p$.i && (_p$.i = _$setProp(_el$3, "fg", _v$5, _p$.i));
+            _v$3 !== _p$.a && (_p$.a = _$setProp(_el$2, "backgroundColor", _v$3, _p$.a));
+            _v$4 !== _p$.o && (_p$.o = _$setProp(_el$2, "width", _v$4, _p$.o));
+            _v$5 !== _p$.i && (_p$.i = _$setProp(_el$2, "onMouseDown", _v$5, _p$.i));
+            _v$6 !== _p$.n && (_p$.n = _$setProp(_el$3, "fg", _v$6, _p$.n));
             return _p$;
           }, {
             e: undefined,
             t: undefined,
             a: undefined,
             o: undefined,
-            i: undefined
+            i: undefined,
+            n: undefined
           });
           return _el$2;
         })()

dist/components/NotificationHost.js

@@ -1,7 +1,7 @@
 // @bun
 import {
   NotificationHost
-} from "../chunk-b0h95a6q.js";
+} from "../chunk-fqzxyvhv.js";
 import"../chunk-x7m82z3z.js";
 import"../chunk-7f8jagy5.js";
 import"../chunk-hcq62p48.js";

dist/components/index.js

@@ -4,7 +4,7 @@ import {
 } from "../chunk-kd78dgfb.js";
 import {
   NotificationHost
-} from "../chunk-b0h95a6q.js";
+} from "../chunk-fqzxyvhv.js";
 import {
   Toggle
 } from "../chunk-mezyz219.js";

src/components/NotificationHost.tsx

@@ -14,6 +14,7 @@ const KIND_LABEL: Record<NotificationKind, string> = {
 export interface NotificationHostProps {
   width?: number;
   colors?: Partial<Record<NotificationKind, ColorInput>>;
+  backgroundColor?: ColorInput;
 }
 
 export function NotificationHost(props: NotificationHostProps = {}) {
@@ -34,6 +35,7 @@ export function NotificationHost(props: NotificationHostProps = {}) {
               border
               borderStyle={theme.borderStyle}
               borderColor={colorFor(toast.kind)}
+              backgroundColor={props.backgroundColor ?? theme.background}
               width={props.width ?? 32}
               marginBottom={1}
               onMouseDown={theme.mouse ? () => dismiss(toast.id) : undefined}