CODEWITHSUNDEEP
maui
David
David

Reputation: 31

.NET MAUI Light/Dark Theme customization of ActionSheet & Calendar

)

we are creating an Android & iOS App in .NET MAUI 7. For now, we only do a Light Theme for the app.

That works fine for 98% of the app - but we're having issues with the other 2 elements when the Android Phone is set to "Dark Theme" (tested on Android, not yet verified for iOS):

Basically, the problem is that the ActionSheet and the Date-Picker Calendar are 'dark':

ActionSheet Calendar

As you can see, the red buttons are hardly readable - and the red circle in the calendar is also quite bad.

The dark grey background & white font seem to be some default values - but we have no idea where to update them. For the red color, we found that it's currently defined in a color.xml file (it's our CI color):

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorIconLogo">#bb2231</color>
    <color name="colorIconContour">#000000</color>
    <color name="colorIconBackground">#f3f3f3</color>
    
    <color name="colorPrimary">#bb2231</color>
    <color name="colorPrimaryDark">#84000b</color>
    <color name="colorAccent">#bb2231</color>
</resources>

The used colors are colorPrimary and colorAccent. We thought that colorPrimaryDark would be used in Dark Theme, but that's not the case. We could simply set them to White, but then they wouldn't be readable in light mode.

So, here are my questions:

  1. How can we define the colors of the ActionSheet and the Calendar for the Dark Theme?
  2. If the background cannot be changed, is there at least a chance to define the button-color for dark theme?

Thank you!

David

I did not yet have any good ideas :-(

Upvotes: 2

Views: 2618

Answers (2)

David
David

Reputation: 31

Not an answer for the explicit question, but might help some of you:

The Light Theme can be forced, as explained in this post.

Put AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightNo; into MainApplication; Example (thanks to nebula2! from github!)

[Application]
public class MainApplication : MauiApplication
{
    public MainApplication(IntPtr handle, JniHandleOwnership ownership)
        : base(handle, ownership)
    {
        AppCompatDelegate.DefaultNightMode = AppCompatDelegate.ModeNightNo;
    }

    protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}

Upvotes: 0

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4556

First, you can create a style.xml in the Android folder and add custom android:datePickerDialogTheme in it like following code. I add all of properties that can be changed in native android datePicker. You can choose some of them that you want.

   <?xml version="1.0" encoding="utf-8" ?>  
   <resources>  
       <style name="MyTheme" parent="MainTheme.Base">  
           <item name="android:datePickerDialogTheme">@style/CustomDatePickerDialog</item>  
       </style>  
     
      <style name="CustomDatePickerDialog" parent="ThemeOverlay.AppCompat.Dialog">  
             <!--header background-->  
             <item name="colorAccent">#009933</item>  
             <!--header textcolor-->  
             <item name="android:textColorPrimaryInverse">#ff9900</item>  
             <!--body background-->  
             <item name="android:windowBackground">#000099</item>  
             <!--selected day-->  
             <item name="android:colorControlActivated">#ff8000</item>  
             <!--days of the month-->  
             <item name="android:textColorPrimary">#ffff00</item>  
             <!--days of the week-->  
             <item name="android:textColorSecondary">#ff0066</item>  
             <!--cancel&ok-->  
             <item name="android:textColor">#00ffff</item>  
        </style>  
   </resources>

Then, you can set this Theme to your MainActivity. But this action will affect MAUI splash screen in android, if you want to use splash screen, you can refer to this document: splash-screen.

 [Activity(Theme = "@style/MyTheme", ....)]  
   public class MainActivity : MauiAppCompatActivity  
   {  
   }

Upvotes: 0

Related Questions