Bug: `Switch.thumbIcon` is given the wrong color and is unreadable

[adil192]

When using a Material Switch with a thumb icon, the icon isn't colored correctly.

When the Switch is in its selected state, the icon becomes unreadable since it's white-on-white.

In the following screenshot, I've included the Yaru theme and the default ThemeData() Material theme:

Switch code snippet

This was put in example/lib/pages/theme_page/src/controls/toggleables.dart:

for (final theme in [null, ThemeData()])
  Theme(
    data: theme ?? Theme.of(context),
    child: Wrap(
      spacing: 10,
      children: [
        Switch(
          onChanged: (value) {},
          value: true,
          thumbIcon: WidgetStateProperty.all(
            const Icon(YaruIcons.ubuntu_logo),
          ),
        ),
        Switch(
          onChanged: (value) {},
          value: false,
          thumbIcon: WidgetStateProperty.all(
            const Icon(YaruIcons.ubuntu_logo),
          ),
        ),
        Switch(
          value: true,
          onChanged: null,
          thumbIcon: WidgetStateProperty.all(
            const Icon(YaruIcons.ubuntu_logo),
          ),
        ),
        Switch(
          value: false,
          onChanged: null,
          thumbIcon: WidgetStateProperty.all(
            const Icon(YaruIcons.ubuntu_logo),
          ),
        ),
        theme == null ? const Text('(Yaru)') : const Text('(Material)'),
      ],
    ),
  ),

[adil192]

Looks like it's hardcoded to use _SwitchConfig.iconColor which Yaru can't modify:

class _SwitchConfigM3 with _SwitchConfig {
  @override
  MaterialStateProperty<Color> get iconColor {
    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.disabled)) {
        if (states.contains(MaterialState.selected)) {
          return _colors.onSurface.withOpacity(0.38);
        }
        return _colors.surfaceContainerHighest.withOpacity(0.38);
      }
      if (states.contains(MaterialState.selected)) {
        if (states.contains(MaterialState.pressed)) {
          return _colors.onPrimaryContainer;
        }
        if (states.contains(MaterialState.hovered)) {
          return _colors.onPrimaryContainer;
        }
        if (states.contains(MaterialState.focused)) {
          return _colors.onPrimaryContainer;
        }
        return _colors.onPrimaryContainer;
      }
      if (states.contains(MaterialState.pressed)) {
        return _colors.surfaceContainerHighest;
      }
      if (states.contains(MaterialState.hovered)) {
        return _colors.surfaceContainerHighest;
      }
      if (states.contains(MaterialState.focused)) {
        return _colors.surfaceContainerHighest;
      }
      return _colors.surfaceContainerHighest;
    });
  }

Possible solutions might be:

1. Accept Switch as broken, and add a new thumbIcon parameter to YaruSwitch in its stead. I think this might be the best option.
2. Change Yaru's colorScheme.onPrimaryContainer and associated colors. The issue is caused because Yaru uses the same color for surface and primary container. But this is a big breaking change.
3. Submit a PR to Flutter to move _SwitchConfig.iconColor into SwitchThemeData.iconColor so we can change it. But this wouldn't be released to stable until next quarter, and they're conservative with changes to the Material library while they migrate it out of Flutter.

[adil192]

Worked around this in my app by just setting the Icon color manually:

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final isCupertino = theme.platform == .iOS || theme.platform == .macOS;
    final colorScheme = theme.colorScheme;
    return _LabelledWidget(
      title: title,
      titleOpacity: titleOpacity,
      child: Switch.adaptive(
        value: value,
        onChanged: onChanged,
        thumbIcon: .resolveWith((states) {
          // We have to manually set the icon color due to this bug:
          // https://github.com/ubuntu/yaru.dart/issues/1065
          final Color color;
          if (states.contains(WidgetState.disabled) && !isCupertino) {
            color = colorScheme.brightness == .dark
                ? colorScheme.onSurface
                : colorScheme.onInverseSurface;
          } else {
            final alpha = states.contains(WidgetState.selected) ? 1.0 : 0.9;
            final fg = colorScheme.brightness == .dark
                ? colorScheme.onInverseSurface
                : colorScheme.onSurface;
            color = fg.withValues(alpha: alpha);
          }

          return Icon(thumbIcon, color: color);
        }),
      ),
    );
  }