iOS Radio Button displays with same black coloring in Dark Mode

[petermauger]

Description

When an iOS device has radio buttons on the view and is in Dark Mode, the radio buttons don't 'appear' to the user. If you set the BackgroundColor of the radio buttons to White then you see that they are actually being rendered but as Black color, and on the typically black background they can't be seen.

Android correctly renders the radio button as white when in Dark Mode.

I've tried to find a Color setting that applies to the radio button circle and dot but none of the colors on that control have any affect.

Steps to Reproduce

1. Create a MAUI app
2. Add one or more radio buttons to the view
3. Run the app on iOS with Dark mode enabled
4. Radio buttons cannot be seen
5. Switch device/simulator to Light mode
6. Radio buttons can be seen
7. Change Radio button BackgroundColor to white (or other non-black color)
8. Run the app on iOS with Dark mode enabled
9. Radio buttons can be seen as black against the new background color

Link to public reproduction project repository

Straightforward to reproduce with new project

Version with bug

7.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS

Affected platform versions

iOS All

Did you find any workaround?

Set Radio Button background color for dark mode to be in contrast to Black
Ideally would have ability to directly interact with radio button 'dot and circle' coloring, but doesn't appear to be any way to do that at the moment

Relevant log output

No logs, just visual app output

[ghost]

Hi @petermauger. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ghost]

This issue has been automatically marked as stale because it has been marked as requiring author feedback to reproduce the issue but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[petermauger]

Can confirm that the effect occurs when using both ListView and CollectionView to house the radio buttons. One per item but linked with same group label

[pwichert]

Same here with this Page-Constructor in dark mode on iOS in .NET 7.
Button-circle displays black and is not visible (black on black):

public TestPage()
{
InitializeComponent();
VerticalStackLayout h = new();
h.Margin = 20;
h.HorizontalOptions = LayoutOptions.Center;
RadioButton noRb = new RadioButton();
noRb.Content = " Test";
noRb.Value = "no";
noRb.GroupName = "Group";
noRb.CheckedChanged += OnRadioButtonCheckedChanged; // do something
noRb.IsChecked = true;
h.Add(noRb);
stackLayout.Add(h); // x:Name="stackLayout" in VerticalStackLayout in XAML
}

[ghost]

Hi @petermauger. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[petermauger]

Was there something wrong with @PureWeen repro code above?

[DanTravison]

I have a repro at https://github.com/DanTravison/RadioButtonTheme and also see difference issues on Windows.

The result is I have not been able to use RadioButton in apps that use themes - either the background is wrong, or the text doesn't appear, or the buttons are not visible.
I would be great if the ThemingDemo app showed correct/expected usage for RadioButton. If there is one, I haven't figured it out.

[dustin-wojciechowski]

Hello, with this last pull request, the issue should be fixed for ios.

@DanTravison

1. I noticed in your repro that the "Light" radiobutton has TextColor in the Content section of the Radiobutton. If you move it to the section, you should see the text when switching modes.
2. If developing for Windows, try manually setting the ControlTemplate to the default template, which will make it behave more like ios rather than use the native WinUI radio button. As so:
   <RadioButton ControlTemplate="{x:Static RadioButton.DefaultTemplate}" /> Recent work should hopefully have this all fixed soon. Another option would be to define your own Control template where you can set AppThemeBindings directly.
3. With this update, this will allow you to then use a ResourceDictionary where you can specify values such as: RadioButtonOuterEllipseStrokeLight/Dark, RadioButtonCheckGlyphStrokeLight/Dark and RadioButtonCheckGlyphFillLight/Dark. We still have to update documentation on this, but hopefully it will be of use to you :)