Improve Dark Mode handling

bpattan · Jan 5, 2021 · 9a59001 · 9a59001
1 parent a54e24d
commit 9a59001
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 19 deletions.
diff --git a/Example/ImageSlideshow/Base.lproj/Main.storyboard b/Example/ImageSlideshow/Base.lproj/Main.storyboard
@@ -1,11 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" colorMatched="YES" initialViewController="jSV-c3-hu2">
-    <device id="retina4_7" orientation="portrait">
-        <adaptation id="fullscreen"/>
-    </device>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17506" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" colorMatched="YES" initialViewController="jSV-c3-hu2">
+    <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17505"/>
+        <capability name="System colors in document resources" minToolsVersion="11.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <scenes>
@@ -25,7 +24,7 @@
                 </tabBarController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="EDh-rt-MM7" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-865" y="157"/>
+            <point key="canvasLocation" x="-1253.6231884057972" y="105.13392857142857"/>
         </scene>
         <!--TableView-->
         <scene sceneID="bbA-cr-xPo">
@@ -35,17 +34,16 @@
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
-                        <inset key="contentInset" minX="-15" minY="0.0" maxX="0.0" maxY="0.0"/>
                         <prototypes>
                             <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" selectionStyle="default" indentationWidth="10" reuseIdentifier="reuseIdentifier" textLabel="yz8-QO-hsL" style="IBUITableViewCellStyleDefault" id="CmE-Ih-6iZ">
                                 <rect key="frame" x="0.0" y="28" width="375" height="100"/>
                                 <autoresizingMask key="autoresizingMask"/>
                                 <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="CmE-Ih-6iZ" id="rN2-1L-CiZ">
-                                    <rect key="frame" x="0.0" y="0.0" width="375" height="99.5"/>
+                                    <rect key="frame" x="0.0" y="0.0" width="375" height="100"/>
                                     <autoresizingMask key="autoresizingMask"/>
                                     <subviews>
                                         <label opaque="NO" multipleTouchEnabled="YES" contentMode="left" insetsLayoutMarginsFromSafeArea="NO" text="Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="yz8-QO-hsL">
-                                            <rect key="frame" x="16" y="0.0" width="344" height="99.5"/>
+                                            <rect key="frame" x="16" y="0.0" width="343" height="100"/>
                                             <autoresizingMask key="autoresizingMask"/>
                                             <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                             <nil key="textColor"/>
@@ -64,23 +62,34 @@
                 </tableViewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="GoS-G9-pmD" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-277" y="619"/>
+            <point key="canvasLocation" x="-380" y="593"/>
         </scene>
         <!--Slideshow-->
         <scene sceneID="ufC-wZ-h7g">
             <objects>
                 <viewController id="vXZ-lx-hvc" customClass="ViewController" customModule="ImageSlideshow_Example" customModuleProvider="target" sceneMemberID="viewController">
+                    <layoutGuides>
+                        <viewControllerLayoutGuide type="top" id="Aqf-BO-7mg"/>
+                        <viewControllerLayoutGuide type="bottom" id="coz-Qs-EFC"/>
+                    </layoutGuides>
                     <view key="view" contentMode="scaleToFill" id="kh9-bI-dsS">
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                         <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                         <subviews>
-                            <view contentMode="scaleToFill" id="L16-jC-HJe" customClass="ImageSlideshow" customModule="ImageSlideshow">
-                                <rect key="frame" x="10" y="35" width="355" height="260"/>
-                                <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES" flexibleMaxY="YES"/>
+                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="L16-jC-HJe" customClass="ImageSlideshow" customModule="ImageSlideshow">
+                                <rect key="frame" x="10" y="40" width="355" height="260"/>
                                 <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                                <constraints>
+                                    <constraint firstAttribute="height" constant="260" id="wMp-Gn-zRN"/>
+                                </constraints>
                             </view>
                         </subviews>
-                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
+                        <constraints>
+                            <constraint firstItem="L16-jC-HJe" firstAttribute="leading" secondItem="kh9-bI-dsS" secondAttribute="leading" constant="10" id="5Ub-dW-Gf0"/>
+                            <constraint firstItem="L16-jC-HJe" firstAttribute="top" secondItem="Aqf-BO-7mg" secondAttribute="bottom" constant="40" id="P4M-C6-92x"/>
+                            <constraint firstAttribute="trailing" secondItem="L16-jC-HJe" secondAttribute="trailing" constant="10" id="bJ6-xp-Uxp"/>
+                        </constraints>
                     </view>
                     <tabBarItem key="tabBarItem" title="Slideshow" id="Jsp-k1-h2n"/>
                     <connections>
@@ -89,7 +98,12 @@
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="x5A-6p-PRh" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="-271" y="-162"/>
+            <point key="canvasLocation" x="-392.75362318840581" y="-108.48214285714285"/>
         </scene>
     </scenes>
+    <resources>
+        <systemColor name="systemBackgroundColor">
+            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+        </systemColor>
+    </resources>
 </document>
diff --git a/Example/ImageSlideshow/ViewController.swift b/Example/ImageSlideshow/ViewController.swift
@@ -30,10 +30,7 @@ class ViewController: UIViewController {
         slideshow.pageIndicatorPosition = .init(horizontal: .center, vertical: .under)
         slideshow.contentScaleMode = UIViewContentMode.scaleAspectFill
 
-        let pageControl = UIPageControl()
-        pageControl.currentPageIndicatorTintColor = UIColor.lightGray
-        pageControl.pageIndicatorTintColor = UIColor.black
-        slideshow.pageIndicator = pageControl
+        slideshow.pageIndicator = UIPageControl.withSlideshowColors()
 
         // optional way to show activity indicator during image load (skipping the line will show no activity indicator)
         slideshow.activityIndicator = DefaultActivityIndicator()

diff --git a/ImageSlideshow/Classes/Core/ImageSlideshow.swift b/ImageSlideshow/Classes/Core/ImageSlideshow.swift
@@ -237,6 +237,9 @@ open class ImageSlideshow: UIView {
     fileprivate func initialize() {
         autoresizesSubviews = true
         clipsToBounds = true
+        if #available(iOS 13.0, *) {
+            backgroundColor = .systemBackground
+        }
 
         // scroll view configuration
         scrollView.frame = CGRect(x: 0, y: 0, width: frame.size.width, height: frame.size.height - 50.0)

diff --git a/ImageSlideshow/Classes/Core/PageIndicator.swift b/ImageSlideshow/Classes/Core/PageIndicator.swift
@@ -39,6 +39,28 @@ extension UIPageControl: PageIndicatorView {
         frame.size.height = 30
         self.frame = frame
     }
+
+    public static func withSlideshowColors() -> UIPageControl {
+        let pageControl = UIPageControl()
+
+        if #available(iOS 13.0, *) {
+            pageControl.currentPageIndicatorTintColor = UIColor { traits in
+                traits.userInterfaceStyle == .dark ? .white : .lightGray
+            }
+        } else {
+            pageControl.currentPageIndicatorTintColor = .lightGray
+        }
+
+        if #available(iOS 13.0, *) {
+            pageControl.pageIndicatorTintColor = UIColor { traits in
+                traits.userInterfaceStyle == .dark ? .systemGray : .black
+            }
+        } else {
+            pageControl.pageIndicatorTintColor = .black
+        }
+
+        return pageControl
+    }
 }
 
 /// Page indicator that shows page in numeric style, eg. "5/21"