Skip to content

Commit 960e4f7

Browse files
Merge pull request #1223 from wordpress-mobile/issue/update_demo_for_dark_mode
Update demo for dark mode
2 parents 16adbfc + 8a6e96b commit 960e4f7

4 files changed

Lines changed: 83 additions & 39 deletions

File tree

Example/Example/Base.lproj/Main.storyboard

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="11201" systemVersion="16A323" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Xa3-wA-iyT">
2+
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15400" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Xa3-wA-iyT">
3+
<device id="retina6_1" orientation="portrait" appearance="light"/>
34
<dependencies>
4-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11161"/>
5-
<capability name="Constraints to layout margins" minToolsVersion="6.0"/>
5+
<deployment identifier="iOS"/>
6+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15404"/>
67
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
78
</dependencies>
89
<scenes>
@@ -11,16 +12,21 @@
1112
<objects>
1213
<tableViewController id="dLa-XM-tnL" customClass="ViewController" customModule="AztecExample" customModuleProvider="target" sceneMemberID="viewController">
1314
<tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="grouped" separatorStyle="default" rowHeight="44" sectionHeaderHeight="18" sectionFooterHeight="18" id="aCg-qL-Bjp">
14-
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
15+
<rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
1516
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
16-
<color key="backgroundColor" red="0.93725490199999995" green="0.93725490199999995" blue="0.95686274510000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
17+
<color key="backgroundColor" systemColor="systemGroupedBackgroundColor" red="0.94901960780000005" green="0.94901960780000005" blue="0.96862745100000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
18+
<color key="tintColor" systemColor="systemBlueColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
19+
<color key="separatorColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
20+
<color key="sectionIndexColor" systemColor="secondaryLabelColor" red="0.23529411759999999" green="0.23529411759999999" blue="0.26274509800000001" alpha="0.59999999999999998" colorSpace="custom" customColorSpace="sRGB"/>
21+
<color key="sectionIndexBackgroundColor" systemColor="systemGroupedBackgroundColor" red="0.94901960780000005" green="0.94901960780000005" blue="0.96862745100000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
1722
<prototypes>
1823
<tableViewCell clipsSubviews="YES" contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" reuseIdentifier="CellIdentifier" id="qo0-pV-osF">
19-
<rect key="frame" x="0.0" y="119.5" width="375" height="44"/>
24+
<rect key="frame" x="0.0" y="55.5" width="414" height="44"/>
2025
<autoresizingMask key="autoresizingMask"/>
2126
<tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="qo0-pV-osF" id="8JQ-dS-Cdh">
22-
<frame key="frameInset" width="375" height="43.5"/>
27+
<rect key="frame" x="0.0" y="0.0" width="414" height="44"/>
2328
<autoresizingMask key="autoresizingMask"/>
29+
<color key="backgroundColor" cocoaTouchSystemColor="tableCellGroupedBackgroundColor"/>
2430
</tableViewCellContentView>
2531
</tableViewCell>
2632
</prototypes>
@@ -44,16 +50,16 @@
4450
<viewControllerLayoutGuide type="bottom" id="ZEP-a0-JgH"/>
4551
</layoutGuides>
4652
<view key="view" contentMode="scaleToFill" id="TWZ-yb-CMI">
47-
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
53+
<rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
4854
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
4955
<subviews>
5056
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="w8z-is-5FM">
51-
<frame key="frameInset" minX="180" minY="236" width="3" height="20"/>
57+
<rect key="frame" x="180" y="236" width="3" height="20"/>
5258
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
5359
<color key="backgroundColor" red="1" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
5460
</view>
5561
<textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" misplaced="YES" usesAttributedText="YES" translatesAutoresizingMaskIntoConstraints="NO" id="yFc-rm-m3C">
56-
<frame key="frameInset" minX="73" width="600" height="600"/>
62+
<rect key="frame" x="73" y="0.0" width="600" height="600"/>
5763
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
5864
<attributedString key="attributedText"/>
5965
<textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
@@ -85,11 +91,11 @@
8591
<viewControllerLayoutGuide type="bottom" id="tZp-mZ-BM8"/>
8692
</layoutGuides>
8793
<view key="view" contentMode="scaleToFill" id="pyu-jY-ESw">
88-
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
94+
<rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
8995
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
9096
<subviews>
9197
<textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" misplaced="YES" usesAttributedText="YES" translatesAutoresizingMaskIntoConstraints="NO" id="yCI-Vs-ZmB">
92-
<frame key="frameInset" width="600" height="600"/>
98+
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
9399
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
94100
<attributedString key="attributedText"/>
95101
<textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
@@ -123,11 +129,11 @@
123129
<viewControllerLayoutGuide type="bottom" id="6EB-tz-iNk"/>
124130
</layoutGuides>
125131
<view key="view" contentMode="scaleToFill" id="sdZ-dG-t9p">
126-
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
132+
<rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
127133
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
128134
<subviews>
129135
<toolbar opaque="NO" clearsContextBeforeDrawing="NO" contentMode="scaleToFill" misplaced="YES" translatesAutoresizingMaskIntoConstraints="NO" id="ZEK-ad-Hg3">
130-
<frame key="frameInset" minY="20" width="600" height="44"/>
136+
<rect key="frame" x="0.0" y="20" width="600" height="44"/>
131137
<items>
132138
<barButtonItem title="B" id="fPu-Uf-Zs9">
133139
<connections>
@@ -157,7 +163,7 @@
157163
</items>
158164
</toolbar>
159165
<textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" misplaced="YES" usesAttributedText="YES" translatesAutoresizingMaskIntoConstraints="NO" id="DeM-yw-u6b">
160-
<frame key="frameInset" minY="64" width="600" height="536"/>
166+
<rect key="frame" x="0.0" y="64" width="600" height="536"/>
161167
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
162168
<attributedString key="attributedText"/>
163169
<textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
@@ -188,7 +194,7 @@
188194
<objects>
189195
<navigationController id="Xa3-wA-iyT" sceneMemberID="viewController">
190196
<navigationBar key="navigationBar" contentMode="scaleToFill" id="JtR-gB-2vV">
191-
<rect key="frame" x="0.0" y="0.0" width="320" height="44"/>
197+
<rect key="frame" x="0.0" y="44" width="414" height="44"/>
192198
<autoresizingMask key="autoresizingMask"/>
193199
</navigationBar>
194200
<connections>

Example/Example/EditorDemoController.swift

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -167,12 +167,23 @@ class EditorDemoController: UIViewController {
167167

168168
edgesForExtendedLayout = UIRectEdge()
169169
navigationController?.navigationBar.isTranslucent = false
170-
171-
view.backgroundColor = .white
172170
view.addSubview(editorView)
173171
view.addSubview(titleTextView)
174172
view.addSubview(titlePlaceholderLabel)
175173
view.addSubview(separatorView)
174+
// color setup
175+
if #available(iOS 13.0, *) {
176+
view.backgroundColor = UIColor.systemBackground
177+
titleTextView.textColor = UIColor.label
178+
editorView.htmlTextView.textColor = UIColor.label
179+
editorView.richTextView.textColor = UIColor.label
180+
editorView.richTextView.blockquoteBackgroundColor = UIColor.tertiarySystemBackground
181+
editorView.richTextView.preBackgroundColor = UIColor.tertiarySystemBackground
182+
var attributes = editorView.richTextView.linkTextAttributes
183+
attributes?[.foregroundColor] = UIColor.link
184+
} else {
185+
view.backgroundColor = UIColor.white
186+
}
176187
//Don't allow scroll while the constraints are being setup and text set
177188
editorView.isScrollEnabled = false
178189
configureConstraints()
@@ -317,7 +328,15 @@ class EditorDemoController: UIViewController {
317328
textView.accessibilityLabel = accessibilityLabel
318329
textView.font = Constants.defaultContentFont
319330
textView.keyboardDismissMode = .interactive
320-
textView.textColor = UIColor(red: 0x1A/255.0, green: 0x1A/255.0, blue: 0x1A/255.0, alpha: 1)
331+
if #available(iOS 13.0, *) {
332+
textView.textColor = UIColor.label
333+
if let htmlStorage = textView.textStorage as? HTMLStorage {
334+
htmlStorage.textColor = UIColor.label
335+
}
336+
} else {
337+
// Fallback on earlier versions
338+
textView.textColor = UIColor(red: 0x1A/255.0, green: 0x1A/255.0, blue: 0x1A/255.0, alpha: 1)
339+
}
321340
textView.linkTextAttributes = [.foregroundColor: UIColor(red: 0x01 / 255.0, green: 0x60 / 255.0, blue: 0x87 / 255.0, alpha: 1), NSAttributedString.Key.underlineStyle: NSNumber(value: NSUnderlineStyle.single.rawValue)]
322341
}
323342

@@ -940,11 +959,20 @@ extension EditorDemoController {
940959

941960
let toolbar = Aztec.FormatBar()
942961

943-
toolbar.tintColor = .gray
944-
toolbar.highlightedTintColor = .blue
945-
toolbar.selectedTintColor = view.tintColor
946-
toolbar.disabledTintColor = .lightGray
947-
toolbar.dividerTintColor = .gray
962+
if #available(iOS 13.0, *) {
963+
toolbar.backgroundColor = UIColor.systemGroupedBackground
964+
toolbar.tintColor = UIColor.secondaryLabel
965+
toolbar.highlightedTintColor = UIColor.systemBlue
966+
toolbar.selectedTintColor = UIColor.systemBlue
967+
toolbar.disabledTintColor = .systemGray4
968+
toolbar.dividerTintColor = UIColor.separator
969+
} else {
970+
toolbar.tintColor = .gray
971+
toolbar.highlightedTintColor = .blue
972+
toolbar.selectedTintColor = view.tintColor
973+
toolbar.disabledTintColor = .lightGray
974+
toolbar.dividerTintColor = .gray
975+
}
948976

949977
toolbar.overflowToggleIcon = Gridicon.iconOfType(.ellipsis)
950978
toolbar.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 44.0)

Example/Example/ViewController.swift

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ class ViewController: UITableViewController
7777
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
7878
let cell = tableView.dequeueReusableCell(withIdentifier: cellIdentifier)!
7979
cell.accessoryType = .disclosureIndicator
80-
80+
//cell.backgroundColor = UIColor.
8181
let row = sections[indexPath.section].rows[indexPath.row]
8282
cell.textLabel?.text = row.title
8383

@@ -87,19 +87,10 @@ class ViewController: UITableViewController
8787
override func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
8888
return 40
8989
}
90-
91-
override func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
92-
let textView = UITextView()
93-
94-
textView.font = UIFont.boldSystemFont(ofSize: 14)
95-
textView.textAlignment = .center
96-
textView.isEditable = false
97-
textView.text = sections[section].title
98-
textView.backgroundColor = UIColor.lightGray
99-
100-
return textView
101-
}
10290

91+
override func tableView(_ tableView: UITableView, titleForHeaderInSection section: Int) -> String? {
92+
return sections[section].title
93+
}
10394

10495
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
10596
tableView.deselectRow(at: indexPath, animated: true)

WordPressEditor/WordPressEditor/Classes/ViewControllers/OptionsTableViewController/OptionsTableViewController.swift

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,25 @@ public struct OptionsTableViewOption: Equatable {
2424
}
2525

2626
public class OptionsTableViewController: UITableViewController {
27+
28+
enum Constants {
29+
static var cellBackgroundColor: UIColor = {
30+
if #available(iOS 13.0, *) {
31+
return .systemBackground
32+
} else {
33+
return .white
34+
}
35+
}()
36+
37+
static var cellSelectedBackgroundColor: UIColor = {
38+
if #available(iOS 13.0, *) {
39+
return .secondarySystemBackground
40+
} else {
41+
return .lightGray
42+
}
43+
}()
44+
}
45+
2746
private static let rowHeight: CGFloat = 44.0
2847

2948
public typealias OnSelectHandler = (_ selected: Int) -> Void
@@ -32,14 +51,14 @@ public class OptionsTableViewController: UITableViewController {
3251

3352
public var onSelect: OnSelectHandler?
3453

35-
public var cellBackgroundColor: UIColor = .white {
54+
public var cellBackgroundColor: UIColor = Constants.cellBackgroundColor {
3655
didSet {
3756
tableView.backgroundColor = cellBackgroundColor
3857
tableView?.reloadData()
3958
}
4059
}
4160

42-
public var cellSelectedBackgroundColor: UIColor = .lightGray
61+
public var cellSelectedBackgroundColor: UIColor = Constants.cellSelectedBackgroundColor
4362

4463
public var cellDeselectedTintColor: UIColor? {
4564
didSet {

0 commit comments

Comments
 (0)