Repository: flutter
Issue: Dark mode elevation overlay color is only applied to Material of type canvas, when surface and background colors are equal
Labels: c: new feature,framework,f: material design,c: proposal,has reproducible steps,found in release: 2.5,found in release: 2.6,team-design,triaged-design

# Description

In dark mode, when using themes that specify `applyElevationOverlayColor: true` with themes that specify slightly different `background` and `surface` colors, the Material dark mode overlay color only gets applied correctly to `Material` of type `card`, it is not applied to `Material` of type `canvas`. 

If we are using the same themed color for `background` and `surface` in a dark theme, then elevation overlay color is applied to both `Material` of type `canvas` and of type `card`. This behavior is inconsistent and not expected.

Expected behavior would be to get the elevation overlay color also on Material of of type `canvas`, even if its themed color differs slighlt from `surface` color.

## This issue applies to

All Flutter channels and all platforms.

## Steps to Reproduce

In dark mode, when using theme's that specify `applyElevationOverlayColor: true` themes with default `background` and `surface` colors get elevation overlay color applied correctly, as shown here:

### OK - Default or Equal background & surface colors => Elevation overlay is OK

<details>
  <summary>OK - Default background and surface - Example code</summary>

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// Light theme mode colors.
const Color kLightPrimary = Color(0xFF0A496A);
const Color kLightPrimaryVariant = Color(0xFF2A9D8F);
const Color kLightSecondary = Color(0xFFF86541);
const Color kLightSecondaryVariant = Color(0xFFF07E24);

// Dark theme mode colors.
const Color kDarkPrimary = Color(0xFF62AEDC);
const Color kDarkPrimaryVariant = Color(0xFF50A399);
const Color kDarkSecondary = Color(0xFFF06E4B);
const Color kDarkSecondaryVariant = Color(0xFFD57534);

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode themeMode = ThemeMode.dark;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData.from(
        colorScheme: const ColorScheme.light(
          primary: kLightPrimary,
          primaryVariant: kLightPrimaryVariant,
          secondary: kLightSecondary,
          secondaryVariant: kLightSecondaryVariant,
        ),
      ).copyWith(
        scaffoldBackgroundColor:
            Color.alphaBlend(kLightPrimary.withAlpha(0x05), Colors.white),
      ),
      darkTheme: ThemeData.from(
          colorScheme: const ColorScheme.dark(
        primary: kDarkPrimary,
        primaryVariant: kDarkPrimaryVariant,
        secondary: kDarkSecondary,
        secondaryVariant: kDarkSecondaryVariant,
      )).copyWith(
        scaffoldBackgroundColor: Color.alphaBlend(
            kDarkPrimary.withAlpha(0x05), const Color(0xff121212)),
      ),
      themeMode: themeMode,
      home: MyHomePage(
        title: 'Flutter Demo Home Page',
        themeMode: themeMode,
        onThemeModeChanged: (ThemeMode mode) {
          setState(() {
            themeMode = mode;
          });
        },
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({
    Key? key,
    required this.title,
    required this.themeMode,
    required this.onThemeModeChanged,
  }) : super(key: key);

  final String title;
  final ThemeMode themeMode;
  final ValueChanged<ThemeMode> onThemeModeChanged;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView(
        padding: const EdgeInsets.all(32),
        children: <Widget>[
          const Text('Toggle theme'),
          ThemeModeSwitch(
            themeMode: themeMode,
            onChanged: onThemeModeChanged,
          ),
          const Divider(),
          const ShowThemeColors(),
          const Divider(),
          const Material(
            type: MaterialType.canvas,
            elevation: 0,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type canvas, elevation 0'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            type: MaterialType.canvas,
            elevation: 1,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type canvas, elevation 1'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            type: MaterialType.canvas,
            elevation: 4,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type canvas, elevation 4'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            type: MaterialType.canvas,
            elevation: 8,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type canvas, elevation 8'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Divider(),
          const Material(
            elevation: 0,
            type: MaterialType.card,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type card, elevation 0'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            elevation: 1,
            type: MaterialType.card,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type card, elevation 1'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            elevation: 4,
            type: MaterialType.card,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type card, elevation 4'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            elevation: 8,
            type: MaterialType.card,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type card, elevation 8'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Divider(),
          const Card(
            elevation: 0,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Card widget, elevation 0'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Card(
            elevation: 1,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Card widget, elevation 1'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Card(
            elevation: 4,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Card widget, elevation 4'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Card(
            elevation: 8,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Card widget, elevation 8'),
              ),
            ),
          ),
          const Divider(),
        ],
      ),
    );
  }
}

/// Widget used to toggle the theme style of the application.
@immutable
class ThemeModeSwitch extends StatelessWidget {
  const ThemeModeSwitch({
    Key? key,
    required this.themeMode,
    required this.onChanged,
  }) : super(key: key);
  final ThemeMode themeMode;
  final ValueChanged<ThemeMode> onChanged;

  @override
  Widget build(BuildContext context) {
    final List<bool> isSelected = <bool>[
      themeMode == ThemeMode.light,
      themeMode == ThemeMode.system,
      themeMode == ThemeMode.dark,
    ];
    return ToggleButtons(
      isSelected: isSelected,
      onPressed: (int newIndex) {
        if (newIndex == 0) {
          onChanged(ThemeMode.light);
        } else if (newIndex == 1) {
          onChanged(ThemeMode.system);
        } else {
          onChanged(ThemeMode.dark);
        }
      },
      children: const <Widget>[
        Icon(Icons.wb_sunny),
        Icon(Icons.phone_iphone),
        Icon(Icons.bedtime),
      ],
    );
  }
}

// Draw a number of boxes showing the colors of key theme color properties
// in the ColorScheme of the inherited ThemeData and some of its key color
// properties.
// This widget is just used so we can visually see the active theme colors
// in the examples and their used FlexColorScheme based themes.
class ShowThemeColors extends StatelessWidget {
  const ShowThemeColors({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final ColorScheme colorScheme = theme.colorScheme;
    final Color appBarColor =
        theme.appBarTheme.backgroundColor ?? theme.primaryColor;

    // A Wrap widget is just the right handy widget for this type of
    // widget to make it responsive.
    return Wrap(
      spacing: 4,
      runSpacing: 4,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: <Widget>[
        ThemeCard(
          label: 'Primary',
          color: colorScheme.primary,
          textColor: colorScheme.onPrimary,
        ),
        ThemeCard(
          label: 'Primary\nColor',
          color: theme.primaryColor,
          textColor: theme.primaryTextTheme.subtitle1!.color ?? Colors.white,
        ),
        ThemeCard(
          label: 'Primary\nColorDark',
          color: theme.primaryColorDark,
          textColor:
              ThemeData.estimateBrightnessForColor(theme.primaryColorDark) ==
                      Brightness.dark
                  ? Colors.white
                  : Colors.black,
        ),
        ThemeCard(
          label: 'Primary\nColorLight',
          color: theme.primaryColorLight,
          textColor:
              ThemeData.estimateBrightnessForColor(theme.primaryColorLight) ==
                      Brightness.dark
                  ? Colors.white
                  : Colors.black,
        ),
        ThemeCard(
          label: 'Secondary\nHeader',
          color: theme.secondaryHeaderColor,
          textColor: ThemeData.estimateBrightnessForColor(
                      theme.secondaryHeaderColor) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'Primary\nVariant',
          color: colorScheme.primaryVariant,
          textColor: ThemeData.estimateBrightnessForColor(
                      colorScheme.primaryVariant) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'Secondary',
          color: colorScheme.secondary,
          textColor: colorScheme.onSecondary,
        ),
        ThemeCard(
          label: 'Toggleable\nActive',
          color: theme.toggleableActiveColor,
          textColor: ThemeData.estimateBrightnessForColor(
                      theme.toggleableActiveColor) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'Secondary\nVariant',
          color: colorScheme.secondaryVariant,
          textColor: ThemeData.estimateBrightnessForColor(
                      colorScheme.secondaryVariant) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'AppBar',
          color: appBarColor,
          textColor: ThemeData.estimateBrightnessForColor(appBarColor) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'Bottom\nAppBar',
          color: theme.bottomAppBarColor,
          textColor:
              ThemeData.estimateBrightnessForColor(theme.bottomAppBarColor) ==
                      Brightness.dark
                  ? Colors.white
                  : Colors.black,
        ),
        ThemeCard(
          label: 'Divider',
          color: theme.dividerColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Background',
          color: colorScheme.background,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Canvas',
          color: theme.canvasColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Surface',
          color: colorScheme.surface,
          textColor: colorScheme.onSurface,
        ),
        ThemeCard(
          label: 'Card',
          color: theme.cardColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Dialog',
          color: theme.dialogBackgroundColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Scaffold\nbackground',
          color: theme.scaffoldBackgroundColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Error',
          color: colorScheme.error,
          textColor: colorScheme.onError,
        ),
      ],
    );
  }
}

// This is just simple SizedBox with a Card with a passed in label, background
// and text label color. Used to show the colors of a theme color property.
class ThemeCard extends StatelessWidget {
  const ThemeCard({
    Key? key,
    required this.label,
    required this.color,
    required this.textColor,
  }) : super(key: key);

  final String label;
  final Color color;
  final Color textColor;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50,
      width: 85,
      child: Card(
        margin: EdgeInsets.zero,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4),
          side: BorderSide(
            color: Theme.of(context).dividerColor,
          ),
        ),
        elevation: 0,
        color: color,
        child: Center(
          child: Text(
            label,
            style: TextStyle(color: textColor, fontSize: 12),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

```
</details>

<img src="https://user-images.githubusercontent.com/39990307/133941542-e68b3b6b-af17-49f4-9c85-b331b76b4fd3.png" width="600" />

## Issue: Using surface and background colors that are not equal

If we define colors for `background` and `surface` in dark theme mode that are different from each other, we no longer get any elevation color overlay on `Material` using the background color, that `Material` of type `canvas` uses for its color. We still do get it on `Material` using the `surface` colored material, which `Material` of type `card` uses.

This is inconsistent with the default built in background colors behavior and also not consistent with expected behavior when using `Material` type `canvas` with `elevation` > 0.

Typically one gets into to this situation when using `background` and `surface` colors that for example blend in a bit of primary color into the surfaces, but do so at different strength for `background` and `surface`, for more a nuanced primary color branded designed.

### Fail example

In this example we create such a theme to demonstrate the issue. With this example we can see that we no longer get any elevation color applied to `Material` of type `canvas`.

<details>
  <summary>FAIL - No background overlay elevation color - Example code</summary>

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

// Light theme mode colors.
const Color kLightPrimary = Color(0xFF0A496A);
const Color kLightPrimaryVariant = Color(0xFF2A9D8F);
const Color kLightSecondary = Color(0xFFF86541);
const Color kLightSecondaryVariant = Color(0xFFF07E24);

// Dark theme mode colors.
const Color kDarkPrimary = Color(0xFF62AEDC);
const Color kDarkPrimaryVariant = Color(0xFF50A399);
const Color kDarkSecondary = Color(0xFFF06E4B);
const Color kDarkSecondaryVariant = Color(0xFFD57534);

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeMode themeMode = ThemeMode.dark;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData.from(
        colorScheme: ColorScheme.light(
          primary: kLightPrimary,
          primaryVariant: kLightPrimaryVariant,
          secondary: kLightSecondary,
          secondaryVariant: kLightSecondaryVariant,
          background:
              Color.alphaBlend(kLightPrimary.withAlpha(0x10), Colors.white),
          surface:
              Color.alphaBlend(kLightPrimary.withAlpha(0x20), Colors.white),
        ),
      ).copyWith(
        scaffoldBackgroundColor:
            Color.alphaBlend(kLightPrimary.withAlpha(0x05), Colors.white),
      ),
      darkTheme: ThemeData.from(
          colorScheme: ColorScheme.dark(
        primary: kDarkPrimary,
        primaryVariant: kDarkPrimaryVariant,
        secondary: kDarkSecondary,
        secondaryVariant: kDarkSecondaryVariant,
        background: Color.alphaBlend(
            kDarkPrimary.withAlpha(0x25), const Color(0xff121212)),
        surface: Color.alphaBlend(
            kDarkPrimary.withAlpha(0x40), const Color(0xff121212)),
      )).copyWith(
        scaffoldBackgroundColor: Color.alphaBlend(
            kDarkPrimary.withAlpha(0x05), const Color(0xff121212)),
      ),
      themeMode: themeMode,
      home: MyHomePage(
        title: 'Flutter Demo Home Page',
        themeMode: themeMode,
        onThemeModeChanged: (ThemeMode mode) {
          setState(() {
            themeMode = mode;
          });
        },
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({
    Key? key,
    required this.title,
    required this.themeMode,
    required this.onThemeModeChanged,
  }) : super(key: key);

  final String title;
  final ThemeMode themeMode;
  final ValueChanged<ThemeMode> onThemeModeChanged;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView(
        padding: const EdgeInsets.all(32),
        children: <Widget>[
          const Text('Toggle theme'),
          ThemeModeSwitch(
            themeMode: themeMode,
            onChanged: onThemeModeChanged,
          ),
          const Divider(),
          const ShowThemeColors(),
          const Divider(),
          const Material(
            type: MaterialType.canvas,
            elevation: 0,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type canvas, elevation 0'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            type: MaterialType.canvas,
            elevation: 1,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type canvas, elevation 1'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            type: MaterialType.canvas,
            elevation: 4,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type canvas, elevation 4'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            type: MaterialType.canvas,
            elevation: 8,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type canvas, elevation 8'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Divider(),
          const Material(
            elevation: 0,
            type: MaterialType.card,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type card, elevation 0'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            elevation: 1,
            type: MaterialType.card,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type card, elevation 1'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            elevation: 4,
            type: MaterialType.card,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type card, elevation 4'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Material(
            elevation: 8,
            type: MaterialType.card,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Material type card, elevation 8'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Divider(),
          const Card(
            elevation: 0,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Card widget, elevation 0'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Card(
            elevation: 1,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Card widget, elevation 1'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Card(
            elevation: 4,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Card widget, elevation 4'),
              ),
            ),
          ),
          const SizedBox(height: 10),
          const Card(
            elevation: 8,
            child: SizedBox(
              height: 50,
              child: Center(
                child: Text('Card widget, elevation 8'),
              ),
            ),
          ),
          const Divider(),
        ],
      ),
    );
  }
}

/// Widget used to toggle the theme style of the application.
@immutable
class ThemeModeSwitch extends StatelessWidget {
  const ThemeModeSwitch({
    Key? key,
    required this.themeMode,
    required this.onChanged,
  }) : super(key: key);
  final ThemeMode themeMode;
  final ValueChanged<ThemeMode> onChanged;

  @override
  Widget build(BuildContext context) {
    final List<bool> isSelected = <bool>[
      themeMode == ThemeMode.light,
      themeMode == ThemeMode.system,
      themeMode == ThemeMode.dark,
    ];
    return ToggleButtons(
      isSelected: isSelected,
      onPressed: (int newIndex) {
        if (newIndex == 0) {
          onChanged(ThemeMode.light);
        } else if (newIndex == 1) {
          onChanged(ThemeMode.system);
        } else {
          onChanged(ThemeMode.dark);
        }
      },
      children: const <Widget>[
        Icon(Icons.wb_sunny),
        Icon(Icons.phone_iphone),
        Icon(Icons.bedtime),
      ],
    );
  }
}

// Draw a number of boxes showing the colors of key theme color properties
// in the ColorScheme of the inherited ThemeData and some of its key color
// properties.
// This widget is just used so we can visually see the active theme colors
// in the examples and their used FlexColorScheme based themes.
class ShowThemeColors extends StatelessWidget {
  const ShowThemeColors({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final ColorScheme colorScheme = theme.colorScheme;
    final Color appBarColor =
        theme.appBarTheme.backgroundColor ?? theme.primaryColor;

    // A Wrap widget is just the right handy widget for this type of
    // widget to make it responsive.
    return Wrap(
      spacing: 4,
      runSpacing: 4,
      crossAxisAlignment: WrapCrossAlignment.center,
      children: <Widget>[
        ThemeCard(
          label: 'Primary',
          color: colorScheme.primary,
          textColor: colorScheme.onPrimary,
        ),
        ThemeCard(
          label: 'Primary\nColor',
          color: theme.primaryColor,
          textColor: theme.primaryTextTheme.subtitle1!.color ?? Colors.white,
        ),
        ThemeCard(
          label: 'Primary\nColorDark',
          color: theme.primaryColorDark,
          textColor:
              ThemeData.estimateBrightnessForColor(theme.primaryColorDark) ==
                      Brightness.dark
                  ? Colors.white
                  : Colors.black,
        ),
        ThemeCard(
          label: 'Primary\nColorLight',
          color: theme.primaryColorLight,
          textColor:
              ThemeData.estimateBrightnessForColor(theme.primaryColorLight) ==
                      Brightness.dark
                  ? Colors.white
                  : Colors.black,
        ),
        ThemeCard(
          label: 'Secondary\nHeader',
          color: theme.secondaryHeaderColor,
          textColor: ThemeData.estimateBrightnessForColor(
                      theme.secondaryHeaderColor) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'Primary\nVariant',
          color: colorScheme.primaryVariant,
          textColor: ThemeData.estimateBrightnessForColor(
                      colorScheme.primaryVariant) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'Secondary',
          color: colorScheme.secondary,
          textColor: colorScheme.onSecondary,
        ),
        ThemeCard(
          label: 'Toggleable\nActive',
          color: theme.toggleableActiveColor,
          textColor: ThemeData.estimateBrightnessForColor(
                      theme.toggleableActiveColor) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'Secondary\nVariant',
          color: colorScheme.secondaryVariant,
          textColor: ThemeData.estimateBrightnessForColor(
                      colorScheme.secondaryVariant) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'AppBar',
          color: appBarColor,
          textColor: ThemeData.estimateBrightnessForColor(appBarColor) ==
                  Brightness.dark
              ? Colors.white
              : Colors.black,
        ),
        ThemeCard(
          label: 'Bottom\nAppBar',
          color: theme.bottomAppBarColor,
          textColor:
              ThemeData.estimateBrightnessForColor(theme.bottomAppBarColor) ==
                      Brightness.dark
                  ? Colors.white
                  : Colors.black,
        ),
        ThemeCard(
          label: 'Divider',
          color: theme.dividerColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Background',
          color: colorScheme.background,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Canvas',
          color: theme.canvasColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Surface',
          color: colorScheme.surface,
          textColor: colorScheme.onSurface,
        ),
        ThemeCard(
          label: 'Card',
          color: theme.cardColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Dialog',
          color: theme.dialogBackgroundColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Scaffold\nbackground',
          color: theme.scaffoldBackgroundColor,
          textColor: colorScheme.onBackground,
        ),
        ThemeCard(
          label: 'Error',
          color: colorScheme.error,
          textColor: colorScheme.onError,
        ),
      ],
    );
  }
}

// This is just simple SizedBox with a Card with a passed in label, background
// and text label color. Used to show the colors of a theme color property.
class ThemeCard extends StatelessWidget {
  const ThemeCard({
    Key? key,
    required this.label,
    required this.color,
    required this.textColor,
  }) : super(key: key);

  final String label;
  final Color color;
  final Color textColor;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 50,
      width: 85,
      child: Card(
        margin: EdgeInsets.zero,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(4),
          side: BorderSide(
            color: Theme.of(context).dividerColor,
          ),
        ),
        elevation: 0,
        color: color,
        child: Center(
          child: Text(
            label,
            style: TextStyle(color: textColor, fontSize: 12),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

```
</details>

Here we see that we get a flat uniform color, despite different elevation, with `Material` of type `canvas`: 

<img src="https://user-images.githubusercontent.com/39990307/133943126-5cef937a-95a8-465f-9139-99d07469ef3d.png" width="600" />

The example is using slightly different color for `surface` and `background` in its dark theme:

```dart
        background: Color.alphaBlend(
            kDarkPrimary.withAlpha(0x25), const Color(0xff121212)),
        surface: Color.alphaBlend(
            kDarkPrimary.withAlpha(0x40), const Color(0xff121212)),
```

If we change the `background` color to use the same color definition as the `surface` color:


```dart
        background: Color.alphaBlend(
            kDarkPrimary.withAlpha(0x40), const Color(0xff121212)),
        surface: Color.alphaBlend(
            kDarkPrimary.withAlpha(0x40), const Color(0xff121212)),
```

then we get overlay color on them too, as seen here:

<img src="https://user-images.githubusercontent.com/39990307/133943282-59777854-8610-4109-a723-f5562430a691.png" width="600" />

We expected overlay color also when `background` was using the slightly darker color branded background color
`Color.alphaBlend(kDarkPrimary.withAlpha(0x25), const Color(0xff121212)),` it should actually have looked like this:

### Expected result:

<img src="https://user-images.githubusercontent.com/39990307/133943368-05b691a5-7cb3-4992-b228-4b5b19dbbee2.png" width="600" />

> NOTE: This example exaggerates the differences one might use in a real design, between the `background` and `surface` colors, just to show the issue visually in a more pronounced way.

### Cause of issue 

The lack of overlay color on the `Material` of type `canvas` in the issue case, is caused by the `applyOverlay` color function.

The `applyOverlay` function is used by the framework to apply the overlay color if theme specified it should be used, and if we are in dark mode. It also checks if the used color without opacity, is the `surface` color, and only then applies it. 

```dart
  static Color applyOverlay(BuildContext context, Color color, double elevation) {
    final ThemeData theme = Theme.of(context);
    if (elevation > 0.0 &&
        theme.applyElevationOverlayColor &&
        theme.brightness == Brightness.dark &&
        color.withOpacity(1.0) == theme.colorScheme.surface.withOpacity(1.0)
    ) {
      return colorWithOverlay(color, theme.colorScheme.onSurface, elevation);
    }
    return color;
  }
```

**However**, since `Material`, when it is of type `canvas`, is actually using the `colorScheme.background` as its themed color, it will not get any elevation overlay color if the theme specifies `background` and `surface` colors that differs slightly from each other. 

This **situation typically occurs** when making color branded surfaces and backgrounds, and one uses slightly different color branded strengths for these colors. This type of **color branding is more common on desktop and web designs**, but might find more uses on devices with **Material V3** as well. 

The current behavior in Flutter prevents us from using more nuanced color branded surfaces, where `surface` and `background` colors use slightly different dark color branded strengths, while retaining the nice elevation overlay on `Material` of type `canvas`.

The current behavior also creates a situation where sometimes themed `Material` of type `canvas`, gets overlay color applied when so defined and as expected, but sometimes it does not. Either it should never get it, or always, when `Material` of type `card` gets it as well. Not as now, only "sometimes", ie when the `background` color happens to be using a themed color, that happens to be equal to themed `surface` color. 

It is worth noticing that if for some reason Material design spec would call for that `Material` of type `canvas` should never get overlay color applied in dark mode for elevations, then widgets like `Drawer` and `BottomNavigationBar` would not get it either. I don't think that is the intent.


## Solution proposal

**Consider** adding a check to see if we are using the surface **or background** color to the `applyOverlay` function:

```dart
  static Color applyOverlay(BuildContext context, Color color, double elevation) {
    final ThemeData theme = Theme.of(context);
    if (elevation > 0.0 &&
        theme.applyElevationOverlayColor &&
        theme.brightness == Brightness.dark &&
        (color.withOpacity(1.0) == theme.colorScheme.surface.withOpacity(1.0) ||
         color.withOpacity(1.0) == theme.colorScheme.background.withOpacity(1.0)
        )
    ) {
      return colorWithOverlay(color, theme.colorScheme.onSurface, elevation);
    }
    return color;
  }
```

The above modification makes the `applyOverlay` color function work correctly with `Material`, also when using color branded themes where the themed colors `colorScheme.surface` and `colorScheme.background` differ slightly from each other.

The above code change was used to produce the earlier visual presentation of the expected outcome above.

## Pull request

I'm willing to submit a pull request with this fix, if this solution is considered acceptable.

<details>
  <summary>Flutter doctor</summary>

```
[√] Flutter (Channel master, 2.6.0-6.0.pre.147, on Microsoft Windows [Version 10.0.19041.1237], locale en-US)
    • Flutter version 2.6.0-6.0.pre.147 at C:\Users\mryds\fvm\versions\master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 83dfb2237a (2 days ago), 2021-09-17 23:48:04 -0400
    • Engine revision 31792e0340
    • Dart version 2.15.0 (build 2.15.0-120.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\mryds\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.10.4)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.10.31515.178
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[√] IntelliJ IDEA Community Edition (version 2021.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2018.3.1
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5284.31

[√] VS Code (version 1.60.0)
    • VS Code at C:\Users\mryds\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.25.0

[√] Connected device (5 available)
    • SM T510 (mobile)                 • R52N906MLAV   • android-arm    • Android 11 (API 30)
    • sdk gphone x86 64 arm64 (mobile) • emulator-5554 • android-x64    • Android 11 (API 30) (emulator)
    • Windows (desktop)                • windows       • windows-x64    • Microsoft Windows [Version 10.0.19041.1237]
    • Chrome (web)                     • chrome        • web-javascript • Google Chrome 93.0.4577.82
    • Edge (web)                       • edge          • web-javascript • Microsoft Edge 93.0.961.52

• No issues found!

```
</details>