Add support for iOS 13 Dark Mode

Example/Standard Integration/BrowseProductsViewController.swift

@@ -78,12 +78,18 @@ class BrowseProductsViewController: UICollectionViewController {
         self.navigationItem.title = "Emoji Apparel"
         self.navigationController?.navigationBar.isTranslucent = false
         self.navigationController?.view.backgroundColor = .white
+        collectionView?.backgroundColor = UIColor(red: 246/255, green: 249/255, blue: 252/255, alpha: 1)
+        #if canImport(CryptoKit)
+        if #available(iOS 13.0, *) {
+            self.navigationController?.view.backgroundColor = .systemBackground
+            collectionView?.backgroundColor = .systemGray6
+        }
+        #endif
         self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "Products", style: .plain, target: nil, action: nil)
         self.navigationItem.leftBarButtonItem = UIBarButtonItem(title: "Settings", style: .plain, target: self, action: #selector(showSettings))
 
         collectionView?.register(EmojiCell.self, forCellWithReuseIdentifier: "Cell")
         collectionView?.allowsMultipleSelection = true
-        collectionView?.backgroundColor = UIColor(red: 246/255, green: 249/255, blue: 252/255, alpha: 1)
 
         // Buy button
         buyButton.translatesAutoresizingMaskIntoConstraints = false

Example/Standard Integration/CheckoutRowView.swift

@@ -52,7 +52,6 @@ class CheckoutRowView: UIView {
         self.title = title
         self.detail = detail
 
-        self.backgroundColor = .white
         self.backgroundView.addTarget(self, action: #selector(didTap), for: .touchUpInside)
         self.addSubview(self.backgroundView)
         self.titleLabel.text = title
@@ -64,16 +63,32 @@ class CheckoutRowView: UIView {
         self.detailLabel.backgroundColor = UIColor.clear
         self.detailLabel.textAlignment = .right;
         self.detailLabel.font = .systemFont(ofSize: 16, weight: .regular)
+        self.backgroundColor = .white
+
         self.detailLabel.textColor = .gray
-        self.addSubview(self.detailLabel)
         self.activityIndicator.activityIndicatorViewStyle = .gray
+        #if canImport(CryptoKit)
+        if #available(iOS 13.0, *) {
+            self.backgroundColor = .systemBackground
+            self.detailLabel.textColor = .secondaryLabel
+            self.activityIndicator.activityIndicatorViewStyle = .medium
+        }
+        #endif
+
+        self.addSubview(self.detailLabel)
         self.addSubview(self.activityIndicator)
+
         installConstraints()
         if !tappable {
             self.backgroundView.isUserInteractionEnabled = false
             self.titleLabel.font = .systemFont(ofSize: 22, weight: .medium)
             self.detailLabel.font = .systemFont(ofSize: 22, weight: .bold)
             self.detailLabel.textColor = .black
+            #if canImport(CryptoKit)
+            if #available(iOS 13.0, *) {
+                self.detailLabel.textColor = .label
+            }
+            #endif
         }
     }
 

Example/Standard Integration/CheckoutViewController.swift

@@ -153,10 +153,17 @@ See https://stripe.com/docs/testing.
 
         self.view.backgroundColor = .white
         self.tableView.backgroundColor = .white
+        #if canImport(CryptoKit)
+        if #available(iOS 13.0, *) {
+            self.view.backgroundColor = .systemBackground
+            self.tableView.backgroundColor = .systemBackground
+        }
+        #endif
         self.tableView.separatorStyle = .none
         self.tableView.rowHeight = 84
         self.tableView.register(EmojiCheckoutCell.self, forCellReuseIdentifier: "Cell")
         var red: CGFloat = 0
+
         self.theme.primaryBackgroundColor.getRed(&red, green: nil, blue: nil, alpha: nil)
         self.activityIndicator.activityIndicatorViewStyle = red < 0.5 ? .white : .gray
         self.navigationItem.title = "Checkout"
@@ -165,6 +172,11 @@ See https://stripe.com/docs/testing.
         let makeSeparatorView: () -> UIView = {
             let view = UIView()
             view.backgroundColor = UIColor(red: 238/255, green: 238/255, blue: 238/255, alpha: 1)
+            #if canImport(CryptoKit)
+            if #available(iOS 13.0, *) {
+                view.backgroundColor = UIColor.systemGray5
+            }
+            #endif
             view.translatesAutoresizingMaskIntoConstraints = false
             NSLayoutConstraint.activate([
                 view.heightAnchor.constraint(equalToConstant: 1),

Example/Standard Integration/EmojiCell.swift

@@ -35,6 +35,13 @@ class EmojiCell: UICollectionViewCell {
                     self.contentView.backgroundColor = UIColor(red: 231/255, green: 235/255, blue: 239/255, alpha: 1)
                     self.emojiLabel.textColor = .black
                     self.priceLabel.textColor = .black
+                    #if canImport(CryptoKit)
+                    if #available(iOS 13.0, *) {
+                        self.contentView.backgroundColor = .systemGray5
+                        self.emojiLabel.textColor = .label
+                        self.priceLabel.textColor = .label
+                    }
+                    #endif
                     self.plusMinusButton.style = .plus
                 }
             }
@@ -68,6 +75,11 @@ class EmojiCell: UICollectionViewCell {
     private func installConstraints() {
         let emojiContentBackground = UIView()
         emojiContentBackground.backgroundColor = .white
+        #if canImport(CryptoKit)
+        if #available(iOS 13.0, *) {
+            emojiContentBackground.backgroundColor = .systemBackground
+        }
+        #endif
         emojiContentBackground.layer.cornerRadius = 4
 
         for view in [emojiContentBackground, priceLabel, emojiLabel, plusMinusButton] {
@@ -108,7 +120,16 @@ class PlusMinusButton: UIView {
 
     override func draw(_ rect: CGRect) {
         let circle = UIBezierPath(ovalIn: rect)
-        let circleColor: UIColor = style == .plus ? .stripeDarkBlue : .white
+        let backgroundColor : UIColor = {
+            var color = UIColor.white
+            #if canImport(CryptoKit)
+            if #available(iOS 13.0, *) {
+                color = .systemBackground
+            }
+            #endif
+            return color
+        }()
+        let circleColor: UIColor = style == .plus ? .stripeDarkBlue : backgroundColor
         circleColor.setFill()
         circle.fill()
 
@@ -125,7 +146,7 @@ class PlusMinusButton: UIView {
             y: rect.size.height / 4,
             width: thickness,
             height: rect.size.height / 2))
-        let lineColor: UIColor = style == .minus ? .stripeDarkBlue : .white
+        let lineColor: UIColor = style == .minus ? .stripeDarkBlue : backgroundColor
         lineColor.setFill()
         horizontalLine.fill()
         if style == .plus {

Example/Standard Integration/SettingsViewController.swift

@@ -54,43 +54,64 @@ class SettingsViewController: UITableViewController {
 
     fileprivate enum Theme: String {
         case Default = "Default"
-        case CustomLight = "Custom – Light"
-        case CustomDark = "Custom – Dark"
+        case Custom = "Custom"
 
         init(row: Int) {
             switch row {
             case 0: self = .Default
-            case 1: self = .CustomLight
-            default: self = .CustomDark
+            default: self = .Custom
             }
         }
 
         var stpTheme: STPTheme {
             switch self {
             case .Default:
                 return STPTheme.default()
-            case .CustomLight:
-                let theme = STPTheme()
+            case .Custom:
+                let theme = STPTheme.init()
                 theme.primaryBackgroundColor = UIColor(red:0.96, green:0.96, blue:0.95, alpha:1.00)
                 theme.secondaryBackgroundColor = UIColor(red:1.00, green:1.00, blue:1.00, alpha:1.00)
                 theme.primaryForegroundColor = UIColor(red:0.35, green:0.35, blue:0.35, alpha:1.00)
                 theme.secondaryForegroundColor = UIColor(red:0.66, green:0.66, blue:0.66, alpha:1.00)
                 theme.accentColor = UIColor(red:0.09, green:0.81, blue:0.51, alpha:1.00)
                 theme.errorColor = UIColor(red:0.87, green:0.18, blue:0.20, alpha:1.00)
+#if canImport(CryptoKit)
+                if #available(iOS 13.0, *) {
+                    theme.primaryBackgroundColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:0.96, green:0.96, blue:0.95, alpha:1.00) :
+                            UIColor(red:0.16, green:0.23, blue:0.31, alpha:1.00)
+                    })
+                    theme.secondaryBackgroundColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:1.00, green:1.00, blue:1.00, alpha:1.00) :
+                            UIColor(red:0.22, green:0.29, blue:0.38, alpha:1.00)
+                    })
+                    theme.primaryForegroundColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:0.35, green:0.35, blue:0.35, alpha:1.00) :
+                            UIColor(red:1.00, green:1.00, blue:1.00, alpha:1.00)
+                    })
+                    theme.secondaryForegroundColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:0.66, green:0.66, blue:0.66, alpha:1.00) :
+                            UIColor(red:0.60, green:0.64, blue:0.71, alpha:1.00)
+                    })
+                    theme.accentColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:0.09, green:0.81, blue:0.51, alpha:1.00) :
+                            UIColor(red:0.98, green:0.80, blue:0.00, alpha:1.00)
+                    })
+                    theme.errorColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:0.87, green:0.18, blue:0.20, alpha:1.00) :
+                            UIColor(red:0.85, green:0.48, blue:0.48, alpha:1.00)
+                    })
+                }
+#endif
                 theme.font = UIFont(name: "ChalkboardSE-Light", size: 17)
                 theme.emphasisFont = UIFont(name: "ChalkboardSE-Bold", size: 17)
                 return theme
-            case .CustomDark:
-                let theme = STPTheme()
-                theme.primaryBackgroundColor = UIColor(red:0.16, green:0.23, blue:0.31, alpha:1.00)
-                theme.secondaryBackgroundColor = UIColor(red:0.22, green:0.29, blue:0.38, alpha:1.00)
-                theme.primaryForegroundColor = UIColor(red:1.00, green:1.00, blue:1.00, alpha:1.00)
-                theme.secondaryForegroundColor = UIColor(red:0.60, green:0.64, blue:0.71, alpha:1.00)
-                theme.accentColor = UIColor(red:0.98, green:0.80, blue:0.00, alpha:1.00)
-                theme.errorColor = UIColor(red:0.85, green:0.48, blue:0.48, alpha:1.00)
-                theme.font = UIFont(name: "GillSans", size: 17)
-                theme.emphasisFont = UIFont(name: "GillSans", size: 17)
-                return theme
             }
         }
     }
@@ -197,7 +218,7 @@ class SettingsViewController: UITableViewController {
 
     override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
         switch Section(section: section) {
-        case .Theme: return 3
+        case .Theme: return 2
         case .ApplePay: return 2
         case .RequiredBillingAddressFields: return 4
         case .RequiredShippingAddressFields: return 4

Example/UI Examples/ThemeViewController.swift

@@ -12,16 +12,14 @@ import Stripe
 class ThemeViewController: UITableViewController {
 
     enum Theme: String {
-        static let count = 3
+        static let count = 2
         case Default = "Default"
-        case CustomDark = "Custom - Dark"
-        case CustomLight = "Custom - Light"
+        case Custom = "Custom"
 
         init?(row: Int) {
             switch row {
             case 0: self = .Default
-            case 1: self = .CustomDark
-            case 2: self = .CustomLight
+            case 1: self = .Custom
             default: return nil
             }
         }
@@ -30,23 +28,54 @@ class ThemeViewController: UITableViewController {
             switch self {
             case .Default:
                 return STPTheme.default()
-            case .CustomDark:
-                let theme = STPTheme.default()
-                theme.primaryBackgroundColor = UIColor(red:66.0/255.0, green:69.0/255.0, blue:112.0/255.0, alpha:255.0/255.0)
-                theme.secondaryBackgroundColor = theme.primaryBackgroundColor
-                theme.primaryForegroundColor = UIColor.white
-                theme.secondaryForegroundColor = UIColor(red:130.0/255.0, green:147.0/255.0, blue:168.0/255.0, alpha:255.0/255.0)
-                theme.accentColor = UIColor(red:14.0/255.0, green:211.0/255.0, blue:140.0/255.0, alpha:255.0/255.0)
-                theme.errorColor = UIColor(red:237.0/255.0, green:83.0/255.0, blue:69.0/255.0, alpha:255.0/255.0)
-                return theme
-            case .CustomLight:
-                let theme = STPTheme.default()
+            case .Custom:
+                let theme = STPTheme.init()
                 theme.primaryBackgroundColor = UIColor(red:230.0/255.0, green:235.0/255.0, blue:241.0/255.0, alpha:255.0/255.0)
                 theme.secondaryBackgroundColor = UIColor.white
                 theme.primaryForegroundColor = UIColor(red:55.0/255.0, green:53.0/255.0, blue:100.0/255.0, alpha:255.0/255.0)
                 theme.secondaryForegroundColor = UIColor(red:148.0/255.0, green:163.0/255.0, blue:179.0/255.0, alpha:255.0/255.0)
                 theme.accentColor = UIColor(red:101.0/255.0, green:101.0/255.0, blue:232.0/255.0, alpha:255.0/255.0)
                 theme.errorColor = UIColor(red:240.0/255.0, green:2.0/255.0, blue:36.0/255.0, alpha:255.0/255.0)
+#if canImport(CryptoKit)
+                if #available(iOS 13.0, *) {
+                    theme.primaryBackgroundColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:230.0/255.0, green:235.0/255.0, blue:241.0/255.0, alpha:255.0/255.0) :
+                            UIColor(red:66.0/255.0, green:69.0/255.0, blue:112.0/255.0, alpha:255.0/255.0)
+                    })
+                    theme.secondaryBackgroundColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            .white : theme.primaryBackgroundColor
+                    })
+                    theme.primaryForegroundColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:55.0/255.0, green:53.0/255.0, blue:100.0/255.0, alpha:255.0/255.0) :
+                            .white
+                    })
+                    theme.secondaryForegroundColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:148.0/255.0, green:163.0/255.0, blue:179.0/255.0, alpha:255.0/255.0) :
+                            UIColor(red:130.0/255.0, green:147.0/255.0, blue:168.0/255.0, alpha:255.0/255.0)
+                    })
+                    theme.accentColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:101.0/255.0, green:101.0/255.0, blue:232.0/255.0, alpha:255.0/255.0) :
+                            UIColor(red:14.0/255.0, green:211.0/255.0, blue:140.0/255.0, alpha:255.0/255.0)
+                    })
+                    theme.errorColor = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                        return (tc.userInterfaceStyle == .light) ?
+                            UIColor(red:240.0/255.0, green:2.0/255.0, blue:36.0/255.0, alpha:255.0/255.0) :
+                            UIColor(red:237.0/255.0, green:83.0/255.0, blue:69.0/255.0, alpha:255.0/255.0)
+                    })
+                } else {
+                    theme.primaryBackgroundColor = UIColor(red:230.0/255.0, green:235.0/255.0, blue:241.0/255.0, alpha:255.0/255.0)
+                    theme.secondaryBackgroundColor = UIColor.white
+                    theme.primaryForegroundColor = UIColor(red:55.0/255.0, green:53.0/255.0, blue:100.0/255.0, alpha:255.0/255.0)
+                    theme.secondaryForegroundColor = UIColor(red:148.0/255.0, green:163.0/255.0, blue:179.0/255.0, alpha:255.0/255.0)
+                    theme.accentColor = UIColor(red:101.0/255.0, green:101.0/255.0, blue:232.0/255.0, alpha:255.0/255.0)
+                    theme.errorColor = UIColor(red:240.0/255.0, green:2.0/255.0, blue:36.0/255.0, alpha:255.0/255.0)
+                }
+#endif
                 return theme
             }
         }

Example/UIColor+Stripe.swift

@@ -9,6 +9,32 @@
 import UIKit
 
 extension UIColor {
-    static let stripeBrightGreen = UIColor(red: 33/255, green: 180/255, blue: 126/255, alpha: 1.0)
-    static let stripeDarkBlue = UIColor(red: 80/255, green: 95/255, blue: 127/255, alpha: 1.0)
+    // Swift unfortunately doesn't yet have a clean way of checking for iOS 13 at compile-time, so we attempt to import CryptoKit, a framework that only exists on iOS 13.
+    // We can delete all of these awful #if canImport() blocks once the iOS 13 SDK is required for App Store submissions, probably ~March 2020.
+    static let stripeBrightGreen : UIColor = {
+        var color = UIColor(red: 33/255, green: 180/255, blue: 126/255, alpha: 1.0)
+        #if canImport(CryptoKit)
+        if #available(iOS 13.0, *) {
+            color = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                return (tc.userInterfaceStyle == .light) ?
+                    UIColor(red: 33/255, green: 180/255, blue: 126/255, alpha: 1.0) :
+                    UIColor(red: 39/255, green: 213/255, blue: 149/255, alpha: 1.0)
+            })
+        }
+        #endif
+        return color
+    }()
+    static let stripeDarkBlue : UIColor = {
+        var color = UIColor(red: 80/255, green: 95/255, blue: 127/255, alpha: 1.0)
+        #if canImport(CryptoKit)
+        if #available(iOS 13.0, *) {
+            color = UIColor.init(dynamicProvider: { (tc) -> UIColor in
+                return (tc.userInterfaceStyle == .light) ?
+                    UIColor(red: 80/255, green: 95/255, blue: 127/255, alpha: 1.0) :
+                    UIColor(red: 121/255, green: 142/255, blue: 188/255, alpha: 1.0)
+            })
+        }
+        #endif
+        return color
+    }()
 }