How to change the background color of the UIAlertController?

Question

Due to strange behavior of UIActionSheet in iOS 8, I have implemented UIAlertController with UIAction as buttons in it. I would like to change the entire background of the UIAlertController. But I can't find any ways to do it.

Tried even with,

actionController.view.backgroundColor = [UIColor blackColor];

But didn't help me out. Any inputs on this regard will be appreciable.

Thanks in advance.

hello Dear, from your question, i created a demo and it's working fine... I tried with yellow color. And it's running. — Er.Shreyansh Shah, Nov 11 '14 at 11:37

score 43 · Answer 1 · edited Aug 12 '23 at 12:52

43

You have to step some views deeper:

let subview = actionController.view.subviews.first! as UIView
let alertContentView = subview.subviews.first! as UIView
alertContentView.backgroundColor = UIColor.blackColor()

And maybe you want to keep original corner radius:

 alertContentView.layer.cornerRadius = 5;

Sorry for the "Swifting" but i'm not familiar with Objective-C. I hope that's similar.

Of course it's also important to change the title color of the actions. Unfortunately I don't know, how to set the color of actions separately. But this is, how you change all button text colors:

actionController.view.tintColor = UIColor.whiteColor();

EDIT:

The corner radius of the UIAlertController has changed since this answer's been posted! Replace this:

 alertContentView.layer.cornerRadius = 5;

to this:

 alertContentView.layer.cornerRadius = 15

edited Aug 12 '23 at 12:52

Stefanos Christodoulides

71
8

answered Mar 18 '15 at 13:04

nischtname

2,193
1
23
21

10

Here's the Objective C version:` UIView * firstView = alertController.view.subviews.firstObject; UIView * nextView = firstView.subviews.firstObject; nextView.backgroundColor = [UIColor greenColor];` – GlennRay Apr 27 '15 at 23:28
This is awesome. It works like a charm and solved my issue. It should be accepted! – Ares Li Aug 11 '15 at 18:27
6

If you're Swifting, what's with the semi-colons?! :) – LevinsonTechnologies Mar 24 '16 at 16:30
@ Levinson: I had some first and Phoenix removed them. They are not necessary ;) – nischtname Mar 29 '16 at 08:48
i dont understand why dont u updated the answer with Objective C – Muhammad Asyraf May 04 '18 at 08:40
3

what version of iOS is this? It does not appear to work in 11.3 – ToddB May 24 '18 at 01:32
Cancel button background color is still white – Yaroslav Dukal Oct 04 '18 at 03:20
iOS 12 : Apple sez: The UIAlertController class is intended to be used as-is and does not support subclassing. The view hierarchy for this class is private and must not be modified. – Tjalsma Oct 25 '18 at 22:23
1

In iOS 13+ we can do: `alertContentView.overrideUserInterfaceStyle = .dark` – taber Feb 18 '20 at 07:47

score 21 · Answer 2 · answered Nov 07 '16 at 15:44

21

maybe you like the use the blur effect in the dark mode. Here is a very easy way to get this:

UIVisualEffectView.appearance(whenContainedInInstancesOf: [UIAlertController.classForCoder() as! UIAppearanceContainer.Type]).effect = UIBlurEffect(style: .dark)

answered Nov 07 '16 at 15:44

Jeanette Müller

999
1
11
19

I originally marked this as working for me, but it does not. When I do this actionSheets work fine (which is what I was trying to solve), but alerts look different than actionSheets. – Neil Apr 11 '17 at 12:18
You're my hero. – Dan Leonard Oct 12 '18 at 22:03
1

Works really well. In swift 4.2 it can be done even more concisely: `UIVisualEffectView.appearance(whenContainedInInstancesOf: [UIAlertController.self]).effect = UIBlurEffect(style: .dark)` – gebirgsbärbel Dec 12 '18 at 21:09
4

This not work for the cancel button, still white color. – zgjie Dec 14 '18 at 15:48

score 18 · Answer 3 · answered May 25 '16 at 00:56

I have found a hack-ish way of doing it. First you need an extension to allow you to search for the UIVisualEffectView inside the UIAlertController:

extension UIView
{
    func searchVisualEffectsSubview() -> UIVisualEffectView?
    {
        if let visualEffectView = self as? UIVisualEffectView
        {
            return visualEffectView
        }
        else
        {
            for subview in subviews
            {
                if let found = subview.searchVisualEffectsSubview()
                {
                    return found
                }
            }
        }

        return nil
    }
}

Important: You have to call this function after calling presentViewController, because only after loading the view controller that the visual effects view is inserted into place. Then you can change the effect associated with it to a dark blur effect:

self.presentViewController(actionController, animated: true, completion: nil)

if let visualEffectView = actionController.view.searchVisualEffectsSubview()
{
    visualEffectView.effect = UIBlurEffect(style: .Dark)
}

And this is the final result:

demo picture

I am honestly surprised myself how well it works! I think this is probably something Apple forgot to add. Also, I haven't yet passed an App through approval with this "hack" (it isn't a hack because we're only using public APIs), but I'm confident there won't be a problem.

This almost works! Unfortunately in Landscape mode on a horizontally regular environment where the buttons are laid out side by side, the Cancel button is still left white as it appears to have no visual effect. — sleep, Jun 23 '16 at 02:37

Shakeel Ahmed · Answer 4 · 2018-04-27T12:44:59.790

12

for Swift 3/ Swift 4

let subview =(alert.view.subviews.first?.subviews.first?.subviews.first!)! as UIView

            subview.backgroundColor = UIColor(red: (145/255.0), green: (200/255.0), blue: (0/255.0), alpha: 1.0)

            alert.view.tintColor = UIColor.black

.

edited Apr 27 '18 at 12:44

answered Mar 31 '17 at 10:35

Shakeel Ahmed

5,361
1
43
34

score 9 · Answer 5 · edited Feb 02 '18 at 14:55

Here is a UIAlertController extension that works on both iPad and iPhone. Cancel button will change from a dark colour to white automatically depending on what blurStyle is selected:

extension UIAlertController {

    private struct AssociatedKeys {
        static var blurStyleKey = "UIAlertController.blurStyleKey"
    }

    public var blurStyle: UIBlurEffectStyle {
        get {
            return objc_getAssociatedObject(self, &AssociatedKeys.blurStyleKey) as? UIBlurEffectStyle ?? .extraLight
        } set (style) {
            objc_setAssociatedObject(self, &AssociatedKeys.blurStyleKey, style, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)

            view.setNeedsLayout()
            view.layoutIfNeeded()
        }
    }

    public var cancelButtonColor: UIColor? {
        return blurStyle == .dark ? UIColor(red: 28.0/255.0, green: 28.0/255.0, blue: 28.0/255.0, alpha: 1.0) : nil
    }

    private var visualEffectView: UIVisualEffectView? {
        if let presentationController = presentationController, presentationController.responds(to: Selector(("popoverView"))), let view = presentationController.value(forKey: "popoverView") as? UIView // We're on an iPad and visual effect view is in a different place.
        {
            return view.recursiveSubviews.flatMap({$0 as? UIVisualEffectView}).first
        }

        return view.recursiveSubviews.flatMap({$0 as? UIVisualEffectView}).first
    }

    private var cancelActionView: UIView? {
        return view.recursiveSubviews.flatMap({
            $0 as? UILabel}
        ).first(where: {
            $0.text == actions.first(where: { $0.style == .cancel })?.title
        })?.superview?.superview
    }

    public convenience init(title: String?, message: String?, preferredStyle: UIAlertControllerStyle, blurStyle: UIBlurEffectStyle) {
        self.init(title: title, message: message, preferredStyle: preferredStyle)
        self.blurStyle = blurStyle
    }

    open override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        visualEffectView?.effect = UIBlurEffect(style: blurStyle)
        cancelActionView?.backgroundColor = cancelButtonColor
    }
}

The following UIView extension is also needed:

extension UIView {

    var recursiveSubviews: [UIView] {
        var subviews = self.subviews.flatMap({$0})
        subviews.forEach { subviews.append(contentsOf: $0.recursiveSubviews) }
        return subviews
    }
}

Example:

let controller = UIAlertController(title: "Dark Alert Controller", message: nil, preferredStyle: .actionSheet, blurStyle: .dark)

// Setup controller actions etc...

present(controller, animated: true, completion: nil)

iPhone:

iPad:

Haven't tried but it violates none of Apples rules. All we are doing is searching through subviews using only public classes — Mark Bourke, Feb 09 '17 at 19:15

score 5 · Answer 6 · edited Jun 20 '20 at 09:12

Swift3

Step into one more layer compare with swift2

    let subview1 = alert.view.subviews.first! as UIView
    let subview2 = subview1.subviews.first! as UIView
    let view = subview2.subviews.first! as UIView

    subview.backgroundColor = backgroundColor
    view.backgroundColor = backgroundColor
    view.layer.cornerRadius = 10.0
    
    // set color to UILabel font
    setSubviewLabelsToTextColor(textColor, view: view)
    
    // set font to alert via KVC, otherwise it'll get overwritten
    let titleAttributed = NSMutableAttributedString(
        string: alert.title!,
        attributes: [NSFontAttributeName:UIFont.boldSystemFont(ofSize: 17)])
    alert.setValue(titleAttributed, forKey: "attributedTitle")
    
    let messageAttributed = NSMutableAttributedString(
        string: alert.message!,
        attributes: [NSFontAttributeName:UIFont.systemFont(ofSize: 13)])
    alert.setValue(messageAttributed, forKey: "attributedMessage")

    // set the buttons to non-blue, if we have buttons
    if let buttonColor = buttonColor {
        alert.view.tintColor = buttonColor
    }

score 4 · Answer 7 · answered Jan 02 '16 at 15:26

func Alert(View: ViewController, Title: String, TitleColor: UIColor, Message: String, MessageColor: UIColor, BackgroundColor: UIColor, BorderColor: UIColor, ButtonColor: UIColor) {

    let TitleString = NSAttributedString(string: Title, attributes: [NSFontAttributeName : UIFont.systemFontOfSize(15), NSForegroundColorAttributeName : TitleColor])
    let MessageString = NSAttributedString(string: Message, attributes: [NSFontAttributeName : UIFont.systemFontOfSize(15), NSForegroundColorAttributeName : MessageColor])

    let alertController = UIAlertController(title: Title, message: Message, preferredStyle: .Alert)

    alertController.setValue(TitleString, forKey: "attributedTitle")
    alertController.setValue(MessageString, forKey: "attributedMessage")

    let okAction = UIAlertAction(title: "OK", style: .Default) { (action) in

    }

    let cancelAction = UIAlertAction(title: "Cancel", style: .Default, handler: nil)

    alertController.addAction(okAction)
    alertController.addAction(cancelAction)


    let subview = alertController.view.subviews.first! as UIView
    let alertContentView = subview.subviews.first! as UIView
    alertContentView.backgroundColor = BackgroundColor
    alertContentView.layer.cornerRadius = 10
    alertContentView.alpha = 1
    alertContentView.layer.borderWidth = 1
    alertContentView.layer.borderColor = BorderColor.CGColor


    //alertContentView.tintColor = UIColor.whiteColor()
    alertController.view.tintColor = ButtonColor

    View.presentViewController(alertController, animated: true) {
        // ...
    }
}

score 2 · Answer 8 · answered Oct 13 '17 at 12:21

For Objective - C Code May be Like.

UIAlertController * alert=[UIAlertController alertControllerWithTitle:@"Title"
                                                              message:@"Message"
                                                       preferredStyle:UIAlertControllerStyleAlert];
UIView *firstSubview = alert.view.subviews.firstObject;
UIView *alertContentView = firstSubview.subviews.firstObject;
for (UIView *subSubView in alertContentView.subviews) {
    subSubView.backgroundColor = [UIColor colorWithRed:255/255.0f green:255/255.0f blue:255/255.0f alpha:1.0f];
}
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action){
   //Close Action
}];
[alert addAction:cancelAction];
[self presentViewController:alert animated:YES completion:nil];

score 1 · Answer 9 · answered Nov 27 '14 at 09:38

1

You can use the appearance proxy.

[[UIView appearanceWhenContainedIn:[UIAlertController class], nil] setBackgroundColor:[UIColor blackColor]];

This seems to apply for all but the cancel action when presenting as an action sheet.

answered Nov 27 '14 at 09:38

Paul Kite

21
3

1

Adding 'yourAlertController.view.backgroundColor = [UIColor clearColor];' after your code makes all the actions black. Cancel action too. – Gabriel.Massana Feb 09 '15 at 17:19
You lose the blur effect, and I see artifacts around the buttons. Not usable. – Jeshua Lacock Jul 23 '15 at 16:30

score 0 · Answer 10 · answered Feb 25 '19 at 08:16

The best decision that i found (without white spots on the sides)

Link to original answer by Vadim Akhmerov

Answer:

It is easier to subclass UIAlertController.

The idea is to traverse through view hierarchy each time viewDidLayoutSubviews gets called, remove effect for UIVisualEffectView's and update their backgroundColor:

class AlertController: UIAlertController {

    /// Buttons background color.
    var buttonBackgroundColor: UIColor = .darkGray {
        didSet {
            // Invalidate current colors on change.
            view.setNeedsLayout()
        }
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Traverse view hierarchy.
        view.allViews.forEach {
            // If there was any non-clear background color, update to custom background.
            if let color = $0.backgroundColor, color != .clear {
                $0.backgroundColor = buttonBackgroundColor
            }
            // If view is UIVisualEffectView, remove it's effect and customise color.
            if let visualEffectView = $0 as? UIVisualEffectView {
                visualEffectView.effect = nil
                visualEffectView.backgroundColor = buttonBackgroundColor
            }
        }

        // Update background color of popoverPresentationController (for iPads).
        popoverPresentationController?.backgroundColor = buttonBackgroundColor
    }

}


extension UIView {

    /// All child subviews in view hierarchy plus self.
    fileprivate var allViews: [UIView] {
        var views = [self]
        subviews.forEach {
            views.append(contentsOf: $0.allViews)
        }

        return views
    }

}

Usage:

Create alert controller(use now AlertController instead UIAlertController)

let testAlertController = AlertController(title: nil, message: nil, preferredStyle: .actionSheet)

Set background color on custom class "AlertController":

var buttonBackgroundColor: UIColor = .darkGray

This is what I have been looking for hours! Do you have any idea on how to keep the little line between options? — Jalil, Jun 21 '21 at 23:03

How to change the background color of the UIAlertController?

10 Answers10

EDIT:

Swift3

Linked