Adds dark mode support on the Connect Button (#298)

Dark mode can now be enabled on the Connect Button by setting the button
`style` property `.dark`.

A new `style` option, `.dynamic`, is also available to have the Connect Button
automatically adapt to light/dark trait changes.

Author: pedrovereza

Examples/GroceryExpress/ConnectionViewController.swift

@@ -35,6 +35,20 @@ class ConnectionViewController: UIViewController {
 
     @IBOutlet weak var opaqueOverlay: UIView!
 
+    @IBOutlet weak var styleChangeButton: UIButton!
+
+    @IBAction func styleChangeButtonTapped(_ sender: Any) {
+        switch connectButton.style {
+        case .light:
+            connectButton.style = .dark
+        case .dark:
+            connectButton.style = .dynamic
+        case .dynamic:
+            connectButton.style = .light
+        }
+
+        updateStyleChangeButtonTitle()
+    }
     // MARK: - Connect flow
 
     private let settings = Settings()
@@ -117,10 +131,20 @@ class ConnectionViewController: UIViewController {
 
         featuresStackView.isLayoutMarginsRelativeArrangement = true
         featuresStackView.layoutMargins = .init(top: 0, left: 20, bottom: 0, right: 20)
-        view.backgroundColor = .white
+        if #available(iOS 13.0, *) {
+            view.backgroundColor = .tertiarySystemBackground
+        } else {
+            view.backgroundColor = .white
+        }
         activityIndicator.color = .black
 
         update(with: displayInformation)
+        updateStyleChangeButtonTitle()
+    }
+
+    private func updateStyleChangeButtonTitle() {
+        styleChangeButton.setTitle("Change style (\(connectButton.style))", for: .normal)
+        styleChangeButton.setTitle("Change style (\(connectButton.style))", for: .selected)
     }
 
     private func update(with display: DisplayInformation) {

Examples/GroceryExpress/Info.plist

@@ -77,8 +77,6 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
-	<key>UIUserInterfaceStyle</key>
-	<string>Light</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 </dict>

Examples/GroceryExpress/Main.storyboard

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="QrA-rv-z6d">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="QrA-rv-z6d">
     <device id="retina5_5" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
@@ -192,7 +192,7 @@
                                         <rect key="frame" x="0.0" y="308.66666666666669" width="354" height="151.66666666666669"/>
                                         <subviews>
                                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="User is not logged into IFTTT" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Wtn-AT-fpa">
-                                                <rect key="frame" x="60.333333333333329" y="0.0" width="233.66666666666669" height="20.333333333333332"/>
+                                                <rect key="frame" x="60.333333333333329" y="0.0" width="233.33333333333337" height="20.333333333333332"/>
                                                 <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
                                                 <nil key="textColor"/>
                                                 <nil key="highlightedColor"/>
@@ -456,8 +456,17 @@
                                         </constraints>
                                         <edgeInsets key="layoutMargins" top="0.0" left="20" bottom="0.0" right="20"/>
                                     </stackView>
+                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ZMe-Cy-eJC">
+                                        <rect key="frame" x="169.66666666666666" y="670" width="75" height="35"/>
+                                        <state key="normal" title="Button"/>
+                                        <buttonConfiguration key="configuration" style="tinted" title="Button"/>
+                                        <connections>
+                                            <action selector="styleChangeButtonTapped:" destination="Qpl-UT-38S" eventType="touchUpInside" id="Ijp-eQ-aBF"/>
+                                        </connections>
+                                    </button>
                                 </subviews>
                                 <constraints>
+                                    <constraint firstItem="ZMe-Cy-eJC" firstAttribute="centerX" secondItem="CS4-C0-5nt" secondAttribute="centerX" id="0wm-EN-Kf3"/>
                                     <constraint firstItem="K6a-ig-8eM" firstAttribute="leading" secondItem="CS4-C0-5nt" secondAttribute="leading" constant="16" id="2hy-qG-IaQ"/>
                                     <constraint firstItem="olx-BK-h7F" firstAttribute="leading" secondItem="CS4-C0-5nt" secondAttribute="leading" id="2oY-Ud-PTM"/>
                                     <constraint firstItem="olx-BK-h7F" firstAttribute="top" secondItem="8Tc-IV-1W8" secondAttribute="bottom" constant="30" id="37u-Rs-36t"/>
@@ -473,6 +482,7 @@
                                     <constraint firstAttribute="trailing" secondItem="8Tc-IV-1W8" secondAttribute="trailing" id="Zpv-Z1-XBj"/>
                                     <constraint firstItem="XJV-id-Dha" firstAttribute="leading" secondItem="8Tc-IV-1W8" secondAttribute="leading" id="bKC-Mz-ntd"/>
                                     <constraint firstAttribute="trailing" secondItem="K6a-ig-8eM" secondAttribute="trailing" constant="16" id="ghb-EQ-8Ob"/>
+                                    <constraint firstAttribute="bottom" secondItem="ZMe-Cy-eJC" secondAttribute="bottom" constant="40" id="h0z-zk-lzc"/>
                                     <constraint firstAttribute="trailing" secondItem="bag-Y6-owB" secondAttribute="trailing" id="h4L-el-I1e"/>
                                     <constraint firstItem="8Tc-IV-1W8" firstAttribute="width" secondItem="CS4-C0-5nt" secondAttribute="width" id="hxt-t2-hCd"/>
                                     <constraint firstItem="XJV-id-Dha" firstAttribute="bottom" secondItem="8Tc-IV-1W8" secondAttribute="bottom" id="vRH-Mg-9yC"/>
@@ -496,6 +506,7 @@
                         <outlet property="connectButton" destination="olx-BK-h7F" id="ktb-dg-ZIw"/>
                         <outlet property="featuresStackView" destination="bag-Y6-owB" id="sqF-6k-JSJ"/>
                         <outlet property="opaqueOverlay" destination="XJV-id-Dha" id="nZb-gG-Ypt"/>
+                        <outlet property="styleChangeButton" destination="ZMe-Cy-eJC" id="DDb-BE-cJA"/>
                         <outlet property="subtitle" destination="K6a-ig-8eM" id="3CG-ct-550"/>
                     </connections>
                 </viewController>

IFTTT SDK/ConnectButton+Constants.swift

@@ -35,5 +35,20 @@ extension ConnectButton {
         static let mediumGrey = UIColor(hex: 0x666666)
         static let grey = UIColor(hex: 0x414141)
         static let border = UIColor(white: 1, alpha: 0.32)
+        static let almostBlack = UIColor(hex: 0x222222)
+
+        static func dynamicColor(light: UIColor, dark: UIColor) -> UIColor {
+            if #available(iOS 13, *) {
+                return UIColor { (UITraitCollection: UITraitCollection) -> UIColor in
+                    if UITraitCollection.userInterfaceStyle == .dark {
+                        return dark
+                    } else {
+                        return light
+                    }
+                }
+            } else {
+                return light
+            }
+        }
     }
 }

IFTTT SDK/ConnectButton+LabelValue.swift

@@ -20,6 +20,9 @@ extension ConnectButton {
 
         /// The attributed text of the label.
         case attributed(NSAttributedString)
+
+        /// The text color of the label.
+        case textColor(UIColor)
 
         /// Updates the label with the value of the enum.
         ///
@@ -33,6 +36,8 @@ extension ConnectButton {
                 label.text = text
             case .attributed(let text):
                 label.attributedText = text
+            case .textColor(let color):
+                label.textColor = color
             }
         }
 
@@ -52,6 +57,8 @@ extension ConnectButton {
                 return lhs == rhs
             case (.attributed(let lhs), .attributed(let rhs)):
                 return lhs == rhs
+            case (.textColor(let lhs), .textColor(let rhs)):
+                return lhs == rhs
             default:
                 return false
             }

IFTTT SDK/ConnectButton+ProgressBar.swift

@@ -21,12 +21,19 @@ extension ConnectButton {
 
         private let track = UIView()
         private let bar = PassthroughView()
+
+        private var defaultColor: UIColor {
+            return Color.dynamicColor(
+                light: Color.grey,
+                dark: Color.lightGrey
+            )
+        }
 
         /// Configures the progress bar background with the optionally provided `Service`.
         ///
         /// - Parameter service: An optional `Service` to set the backgrund color to.
         func configure(with service: Service?) {
-            bar.backgroundColor = service?.brandColor.contrasting() ?? Color.grey
+            bar.backgroundColor = service?.brandColor.contrasting() ?? defaultColor
         }
 
         private func update() {

IFTTT SDK/ConnectButton+Style.swift

@@ -16,6 +16,16 @@ extension ConnectButton {
 
         /// Style the button for a white background
         case light
+
+        /// Style the button for a dark background
+        case dark
+
+        /// Style the button for with dynamic colors:
+        /// When the user device is on light mode, the style used is equivalent to `light`.
+        /// When on dark mode, the style is equivalent to `dark`.
+        ///
+        ///  On iOS versions before 13.0, this style is the same as `light`.
+        case dynamic
 
         struct Font {
             static let connect = UIFont(name: "AvenirNext-Bold", size: 22)!
@@ -24,18 +34,28 @@ extension ConnectButton {
 
         /// The color to use for the footer based on the style.
         var footerColor: UIColor {
+            return UIColor(hex: 0x999999)
+        }
+
+        /// The color to use for the button background based on the style
+        var buttonBackgroundColor: UIColor {
+            return colors(light: Color.almostBlack, dark: .white)
+        }
+
+        /// The color to use for the button text based on the style
+        var textColor: UIColor {
+            return colors(light: .white, dark: .black)
+        }
+
+        private func colors(light: UIColor, dark: UIColor) -> UIColor {
             switch self {
             case .light:
-                return lightColorFooter()
+                return light
+            case .dark:
+                return dark
+            case .dynamic:
+                return Color.dynamicColor(light: light, dark: dark)
             }
         }
-        
-        private func lightColorFooter() -> UIColor {
-            return UIColor(white: 0, alpha: 0.32)
-        }
-        
-        private func darkColorFooter() -> UIColor {
-            return UIColor(white: 1, alpha: 0.32)
-        }
     }
 }