Transparent dialog background during theme switch

[jpnurmi]

When switching between dark and light themes, Yaru-themed dialog's background color is momentarily fully transparent.

yaru-theme-switch.webm

The issue is specifically something with the dark Yaru theme. Switching between Material themes and even between Yaru light and Material dark is smooth.

material-theme-switch.webm

import 'package:flutter/material.dart';
import 'package:yaru/yaru.dart';
import 'package:yaru_widgets/yaru_widgets.dart';

void main() {
  final themeMode = ValueNotifier<ThemeMode>(ThemeMode.system);

  runApp(
    AnimatedBuilder(
      animation: themeMode,
      builder: (context, child) {
        return MaterialApp(
          theme: yaruLight,
          darkTheme: yaruDark,
          // darkTheme: ThemeData.dark(),
          themeMode: themeMode.value,
          home: Scaffold(
            backgroundColor: const Color(0xff380c2a),
            body: AlertDialog(
              title: const Text('Yaru'),
              content: Center(
                child: YaruPopupMenuButton<ThemeMode>(
                  initialValue: themeMode.value,
                  itemBuilder: (context) => [
                    for (final value in ThemeMode.values)
                      PopupMenuItem(
                        value: value,
                        child: Text(value.name),
                      ),
                  ],
                  onSelected: (value) => themeMode.value = value,
                  child: Text(themeMode.value.name),
                ),
              ),
            ),
          ),
        );
      },
    ),
  );
}

[jpnurmi]

On a related note, light dialogs don't have any border so it doesn't stand out against the common background. I'd imagine the animated theme change would also look nicer if both ends of the transition had a border.

Light	Dark

dialog-theme.webm

[jpnurmi]

If we specify DialogTheme.backgroundColor for both light and dark themes then it transitions smooth. Currently, it's only specified for the dark theme:

https://github.com/ubuntu/yaru.dart/blob/main/lib/src/themes/common_themes.dart#L128-L140

ThemeData.dialogBackgroundColor is planned to be deprecated: https://github.com/flutter/flutter/issues/91772

[jpnurmi]

@Feichtmeier @Jupi007 Any ideas on how to make light dialogs stand out against light background? Should we specify a slightly different background color and/or a border color to avoid white on white?

[Jupi007]

Imo, a border would look consistent with the rest of our theme and widgets.