From f16600ea10e4906e03cd52f93392bbdd769868fb Mon Sep 17 00:00:00 2001 From: morgmart <98432065+morgmart@users.noreply.github.com> Date: Wed, 4 Nov 2026 11:42:37 -0800 Subject: [PATCH] mobile: keep the callout dark in dark mode The inverse surface is a flat light gray in dark mode, which washed the first-agent card out. In dark mode the callout now uses the raised dark surface and regular text color, as toasts do. Light mode keeps the inverse colors. Co-authored-by: Carl Co-Authored-By: Claude Opus 5.5 Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com> --- mobile/lib/shared/widgets/buzz_callout.dart | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/mobile/lib/shared/widgets/buzz_callout.dart b/mobile/lib/shared/widgets/buzz_callout.dart index 568581c727..c273151f89 100644 --- a/mobile/lib/shared/widgets/buzz_callout.dart +++ b/mobile/lib/shared/widgets/buzz_callout.dart @@ -84,8 +84,7 @@ class BuzzCallout extends HookWidget { top: padding.top + Grid.xs, ), fullWidth: onTap != null, - // Inverse colors set the callout apart from menus and the page. - color: context.colors.inverseSurface, + color: _calloutColors(context).$1, shadowColor: appPopoverShadowColor(context), child: onTap == null ? _Tip(message: message, onDismiss: onDismiss) @@ -102,6 +101,16 @@ class BuzzCallout extends HookWidget { } } +/// The callout's background and foreground. Inverse colors set it apart from +/// menus and the page; in dark mode, whose inverse is a flat light gray, it +/// uses the raised dark surface instead, as toasts do. +(Color, Color) _calloutColors(BuildContext context) { + final colors = context.colors; + return Theme.of(context).brightness == Brightness.dark + ? (colors.surfaceContainer, colors.onSurface) + : (colors.inverseSurface, colors.onInverseSurface); +} + class _Tip extends StatelessWidget { const _Tip({required this.message, required this.onDismiss}); @@ -127,7 +136,7 @@ class _Tip extends StatelessWidget { message, textAlign: TextAlign.center, style: context.textTheme.bodyMedium?.copyWith( - color: context.colors.onInverseSurface, + color: _calloutColors(context).$2, ), ), ), @@ -204,7 +213,7 @@ class _Card extends StatelessWidget { message, textAlign: TextAlign.center, style: context.textTheme.titleLarge?.copyWith( - color: context.colors.onInverseSurface, + color: _calloutColors(context).$2, ), ), ), @@ -215,7 +224,7 @@ class _Card extends StatelessWidget { child: IconButton( tooltip: 'Dismiss', onPressed: onDismiss, - color: context.colors.onInverseSurface, + color: _calloutColors(context).$2, icon: const Icon(BuzzIcons.x), ), ),