Search code examples
androidmaterial-designandroid-theme

How to replace the color of dialog's text buttons?


I'm using a custom theme for my app. When the dark mode is applied, some colors don't match the dark background at all. For example, text buttons for dialogs:

enter image description here

According to the Material documentation, the text buttons use the Primary color. But I've noticed that the default theme (the purple, blue-green one) uses some secondary color for the text buttons, which is what I'd like to achieve.

That dialog is popped up by a list preference, so I can't create a custom activity as dialog to replace it with its own style.


Solution

  • here is a sample theme of custom themed Dialog hope it helps you

    <style name="Theme.App" parent="Theme.MaterialComponents.DayNight">
        ...
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    
        <item name="materialAlertDialogTheme">@style/ThemeOverlay.App.MaterialAlertDialog</item>
    </style>
    
    //here is importance part
    <style name="ThemeOverlay.App.MaterialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
        <item name="colorPrimary">@color/colorPrimaryDark</item>
        <item name="colorSecondary">@color/colorSecondary</item>
        <item name="colorSurface">@color/colorSurface</item>
        <item name="colorOnSurface">@color/colorAccent</item>
        <item name="alertDialogStyle">@style/MaterialAlertDialog.App</item>
        <item name="materialAlertDialogTitleTextStyle">@style/MaterialAlertDialog.App.Title.Text</item>
        <item name="buttonBarPositiveButtonStyle">@style/Widget.App.Button</item>
        <item name="buttonBarNegativeButtonStyle">@style/Widget.App.Button</item>
    </style>
    
    <style name="MaterialAlertDialog.App" parent="MaterialAlertDialog.MaterialComponents">
        <item name="shapeAppearance">@style/ShapeAppearance.App.MediumComponent</item>
    </style>
    
    // for title color
    <style name="MaterialAlertDialog.App.Title.Text" parent="MaterialAlertDialog.MaterialComponents.Title.Text">
        <item name="android:textColor">@color/color_dialog_buttons</item>
    </style>
    
    <style name="Widget.App.Button" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
        <item name="shapeAppearance">@style/ShapeAppearance.App.SmallComponent</item>
    </style>
    
    // for button colors
    <style name="ThemeOverlay.App.Button" parent="">
        <item name="colorPrimary">@color/color_dialog_buttons</item>
    </style>
    
    <style name="ShapeAppearance.App.MediumComponent" parent="ShapeAppearance.MaterialComponents.MediumComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">8dp</item>
    </style>
    
    <style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">4dp</item>
    </style>