Merge pull request #362 from deltachat/dark_mode

Dark mode

deltachat-ios/Controller/ChatViewController.swift

@@ -63,13 +63,6 @@ class ChatViewController: MessagesViewController {
 
         messagesCollectionView.register(CustomMessageCell.self)
         super.viewDidLoad()
-
-        // TODO: support dark mode for this view, see https://github.com/deltachat/deltachat-ios/issues/163#issuecomment-533797080
-        if #available(iOS 13.0, *) {
-            overrideUserInterfaceStyle = .light
-        }
-
-        view.backgroundColor = DcColors.chatBackgroundColor
         if !DcConfig.configured {
             // TODO: display message about nothing being configured
             return
@@ -283,6 +276,7 @@ class ChatViewController: MessagesViewController {
 
         scrollsToBottomOnKeyboardBeginsEditing = true // default false
         maintainPositionOnKeyboardFrameChanged = true // default false
+        messagesCollectionView.backgroundColor = DcColors.chatBackgroundColor
         messagesCollectionView.addSubview(refreshControl)
         refreshControl.addTarget(self, action: #selector(loadMoreMessages), for: .valueChanged)
 
@@ -318,17 +312,19 @@ class ChatViewController: MessagesViewController {
         messageInputBar.delegate = self
         messageInputBar.inputTextView.tintColor = DcColors.primary
         messageInputBar.inputTextView.placeholder = String.localized("chat_input_placeholder")
-        messageInputBar.isTranslucent = true
         messageInputBar.separatorLine.isHidden = true
         messageInputBar.inputTextView.tintColor = DcColors.primary
+        messageInputBar.inputTextView.textColor = DcColors.defaultTextColor
+        messageInputBar.backgroundView.backgroundColor = DcColors.chatBackgroundColor
 
         scrollsToBottomOnKeyboardBeginsEditing = true
 
-        messageInputBar.inputTextView.backgroundColor = UIColor(red: 245 / 255, green: 245 / 255, blue: 245 / 255, alpha: 1)
-        messageInputBar.inputTextView.placeholderTextColor = UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1)
+        messageInputBar.inputTextView.backgroundColor = DcColors.inputFieldColor
+        messageInputBar.inputTextView.placeholderTextColor = DcColors.placeholderColor
         messageInputBar.inputTextView.textContainerInset = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 38)
         messageInputBar.inputTextView.placeholderLabelInsets = UIEdgeInsets(top: 8, left: 20, bottom: 8, right: 38)
-        messageInputBar.inputTextView.layer.borderColor = UIColor(red: 200 / 255, green: 200 / 255, blue: 200 / 255, alpha: 1).cgColor
+        messageInputBar.inputTextView.layer.borderColor = UIColor.themeColor(light: UIColor(red: 200 / 255, green: 200 / 255, blue: 200 / 255, alpha: 1),
+                                                                             dark: UIColor(red: 55 / 255, green: 55/255, blue: 55/255, alpha: 1)).cgColor
         messageInputBar.inputTextView.layer.borderWidth = 1.0
         messageInputBar.inputTextView.layer.cornerRadius = 16.0
         messageInputBar.inputTextView.layer.masksToBounds = true
@@ -359,12 +355,12 @@ class ChatViewController: MessagesViewController {
                     $0.spacing = .fixed(0)
                     let clipperIcon = #imageLiteral(resourceName: "ic_attach_file_36pt").withRenderingMode(.alwaysTemplate)
                     $0.image = clipperIcon
-                    $0.tintColor = UIColor(white: 0.8, alpha: 1)
+                    $0.tintColor = DcColors.colorDisabled
                     $0.setSize(CGSize(width: 30, height: 30), animated: false)
                 }.onSelected {
                     $0.tintColor = DcColors.primary
                 }.onDeselected {
-                    $0.tintColor = UIColor(white: 0.8, alpha: 1)
+                    $0.tintColor = DcColors.colorDisabled
                 }.onTouchUpInside { _ in
                     self.clipperButtonPressed()
                 }
@@ -380,7 +376,7 @@ class ChatViewController: MessagesViewController {
                 })
             }.onDisabled { item in
                 UIView.animate(withDuration: 0.3, animations: {
-                    item.backgroundColor = UIColor(white: 0.9, alpha: 1)
+                    item.backgroundColor = DcColors.colorDisabled
                 })
             }
     }
@@ -510,7 +506,7 @@ extension ChatViewController: MessagesDataSource {
                 string: MessageKitDateFormatter.shared.string(from: message.sentDate),
                 attributes: [
                     NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 10),
-                    NSAttributedString.Key.foregroundColor: UIColor.darkGray,
+                    NSAttributedString.Key.foregroundColor: DcColors.grayTextColor,
                 ]
             )
         }
@@ -531,7 +527,7 @@ extension ChatViewController: MessagesDataSource {
         if isMessageForwarded(at: indexPath) {
             let forwardedString = NSMutableAttributedString(string: String.localized("forwarded_message"), attributes: [
                 .font: UIFont.systemFont(ofSize: 14),
-                .foregroundColor: UIColor.darkGray,
+                .foregroundColor: DcColors.grayTextColor,
             ])
             if attributedString == nil {
                 attributedString = forwardedString
@@ -657,7 +653,7 @@ extension ChatViewController: MessagesDataSource {
                 string: " - " + stateDescription,
                 attributes: [
                     .font: UIFont.systemFont(ofSize: 12),
-                    .foregroundColor: UIColor.darkText,
+                    .foregroundColor: DcColors.defaultTextColor,
                 ]
             ))
 
@@ -729,7 +725,7 @@ extension ChatViewController: MessagesDataSource {
 extension ChatViewController: MessagesDisplayDelegate {
     // MARK: - Text Messages
     func textColor(for _: MessageType, at _: IndexPath, in _: MessagesCollectionView) -> UIColor {
-        return .darkText
+        return DcColors.defaultTextColor
     }
 
     // MARK: - All Messages
@@ -741,7 +737,7 @@ extension ChatViewController: MessagesDisplayDelegate {
         if isInfoMessage(at: indexPath) {
             return .custom { view in
                 view.style = .none
-                view.backgroundColor = UIColor(alpha: 10, red: 0, green: 0, blue: 0)
+                view.backgroundColor = DcColors.systemMessageBackgroundColor
                 let radius: CGFloat = 16
                 let path = UIBezierPath(roundedRect: view.bounds,
                                         byRoundingCorners: UIRectCorner.allCorners,
@@ -796,6 +792,19 @@ extension ChatViewController: MessagesDisplayDelegate {
     func enabledDetectors(for _: MessageType, at _: IndexPath, in _: MessagesCollectionView) -> [DetectorType] {
         return [.url, .date, .phoneNumber, .address]
     }
+
+    func detectorAttributes(for detector: DetectorType, and message: MessageType, at indexPath: IndexPath) -> [NSAttributedString.Key: Any] {
+        switch detector {
+        case .url:
+            return  [NSAttributedString.Key.foregroundColor: DcColors.defaultTextColor,
+                     NSAttributedString.Key.underlineStyle: NSUnderlineStyle.single.rawValue,
+                     NSAttributedString.Key.underlineColor: DcColors.defaultTextColor]
+        default:
+            return MessageLabel.defaultAttributes
+        }
+
+    }
+
 }
 
 // MARK: - MessagesLayoutDelegate

deltachat-ios/Controller/QrViewController.swift

@@ -193,7 +193,6 @@ class QrViewController: UITableViewController, QrCodeReaderDelegate {
             cell.backgroundColor = bg
             cell.nameLabel.text = name
             cell.emailLabel.text = contact.email
-            cell.darkMode = false
             if let img = contact.profileImage {
                 cell.setImage(img)
             } else {

deltachat-ios/DC/Wrapper.swift

@@ -523,8 +523,9 @@ class DcMsg: MessageType {
         if isInfo {
             let text = NSAttributedString(string: self.text ?? "", attributes: [
                 NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 12),
-                NSAttributedString.Key.foregroundColor: UIColor.darkGray,
+                NSAttributedString.Key.foregroundColor: DcColors.grayTextColor,
                 ])
+            print("show info: ", text)
             return MessageKind.attributedText(text)
         } else if isSetupMessage {
             return MessageKind.text(String.localized("autocrypt_asm_click_body"))
@@ -559,7 +560,8 @@ class DcMsg: MessageType {
         if text.isEmpty {
                        return MessageKind.video(Media(url: fileURL))
                    }
-                   let attributedString = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0)])
+        let attributedString = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0),
+                                                                             NSAttributedString.Key.foregroundColor: DcColors.defaultTextColor])
                    return MessageKind.videoText(Media(url: fileURL, text: attributedString))
     }
 
@@ -567,7 +569,8 @@ class DcMsg: MessageType {
         if text.isEmpty {
             return MessageKind.photo(Media(image: image))
         }
-        let attributedString = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0)])
+        let attributedString = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0),
+                                                                             NSAttributedString.Key.foregroundColor: DcColors.defaultTextColor])
         return MessageKind.photoText(Media(image: image, text: attributedString))
     }
 
@@ -575,7 +578,8 @@ class DcMsg: MessageType {
         let audioAsset = AVURLAsset(url: fileURL!)
         let seconds = Float(CMTimeGetSeconds(audioAsset.duration))
         if !text.isEmpty {
-            let attributedString = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0)])
+            let attributedString = NSAttributedString(string: text, attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0),
+                                                                                 NSAttributedString.Key.foregroundColor: DcColors.defaultTextColor])
             return MessageKind.audio(Audio(url: audioAsset.url, duration: seconds, text: attributedString))
         }
         return MessageKind.audio(Audio(url: fileURL!, duration: seconds))
@@ -584,12 +588,14 @@ class DcMsg: MessageType {
     internal func createFileMessage(text: String) -> MessageKind {
         let fileString = "\(self.filename ?? "???") (\(self.filesize / 1024) kB)"
         let attributedFileString = NSMutableAttributedString(string: fileString,
-                                                             attributes: [NSAttributedString.Key.font: UIFont.italicSystemFont(ofSize: 13.0)])
+                                                             attributes: [NSAttributedString.Key.font: UIFont.italicSystemFont(ofSize: 13.0),
+                                                                          NSAttributedString.Key.foregroundColor: DcColors.defaultTextColor])
         if !text.isEmpty {
             attributedFileString.append(NSAttributedString(string: "\n\n",
                                                            attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 7.0)]))
             attributedFileString.append(NSAttributedString(string: text,
-                                                           attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0)]))
+                                                           attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 16.0),
+                                                                        NSAttributedString.Key.foregroundColor: DcColors.defaultTextColor]))
         }
         return MessageKind.fileText(Media(text: attributedFileString))
     }

deltachat-ios/Extensions/UIColor+Extensions.swift

@@ -29,14 +29,11 @@ import UIKit
 
 internal extension UIColor {
 
+    // Defaults used in messageKit, not in active use
     static let incomingGray = UIColor(red: 230/255, green: 230/255, blue: 235/255, alpha: 1.0)
-
     static let outgoingGreen = UIColor(red: 69/255, green: 214/255, blue: 93/255, alpha: 1.0)
-
     static let inputBarGray = UIColor(red: 247/255, green: 247/255, blue: 247/255, alpha: 1.0)
-
     static let playButtonLightGray = UIColor(red: 230/255, green: 230/255, blue: 230/255, alpha: 1.0)
-
     static let sendButtonBlue = UIColor(red: 15/255, green: 135/255, blue: 255/255, alpha: 1.0)
 
     convenience init(alpha: Int, red: Int, green: Int, blue: Int) {
@@ -74,4 +71,30 @@ internal extension UIColor {
         }
         self.init(red: CGFloat(r) / 255, green: CGFloat(g) / 255, blue: CGFloat(b) / 255, alpha: CGFloat(a) / 255)
     }
+
+
+    static func themeColor(light: UIColor, dark: UIColor? = nil) -> UIColor {
+        if let dark = dark {
+            if #available(iOS 13, *) {
+                return UIColor.init { (trait) -> UIColor in
+                    return trait.userInterfaceStyle == .dark ? dark : light
+                }
+            }
+        }
+        return light
+    }
+
+    static func themeColor(lightHex: String, darkHex: String? = nil) -> UIColor {
+        if let darkHex = darkHex {
+            if #available(iOS 13, *) {
+                return UIColor.init { (trait) -> UIColor in
+                    return trait.userInterfaceStyle == .dark ? UIColor(hexString: darkHex) :  UIColor(hexString: lightHex)
+                }
+            }
+        }
+        return UIColor(hexString: lightHex)
+    }
+
+
+
 }

deltachat-ios/Helper/Colors.swift

@@ -2,12 +2,21 @@ import UIKit
 
 struct DcColors {
     static let primary = UIColor.systemBlue
-    // static let accent =
-
-    static let messagePrimaryColor = UIColor.rgb(red: 220, green: 248, blue: 198)
-    static let messageSecondaryColor = UIColor.rgb(red: 245, green: 245, blue: 245)
-    static let chatBackgroundColor = UIColor.rgb(red: 236, green: 229, blue: 221)
-    static let checkmarkGreen = UIColor.rgb(red: 112, green: 177, blue: 92)
+    static let colorDisabled = UIColor.themeColor(light: UIColor(white: 0.9, alpha: 1), dark: UIColor(white: 0.2, alpha: 1))
+    static let messagePrimaryColor = UIColor.themeColor(light: UIColor.rgb(red: 220, green: 248, blue: 198),
+                                                        dark: UIColor.init(hexString: "224508"))
+    static let messageSecondaryColor = UIColor.themeColor(light: UIColor.rgb(red: 245, green: 245, blue: 245),
+                                                          dark: UIColor.init(hexString: "333333"))
+    static let chatBackgroundColor = UIColor.themeColor(light: UIColor(red: 255, green: 255, blue: 255, alpha: 0), dark: .black)
+    static let checkmarkGreen = UIColor.themeColor(light: UIColor.rgb(red: 112, green: 177, blue: 92))
+    static let defaultTextColor = UIColor.themeColor(light: .darkText, dark: .white)
+    static let grayTextColor = UIColor.themeColor(light: .darkGray, dark: .lightGray)
+    static let secondaryTextColor = UIColor.themeColor(lightHex: "848ba7", darkHex: "a5abc0")
+    static let inputFieldColor =  UIColor.themeColor(light: UIColor(red: 245 / 255, green: 245 / 255, blue: 245 / 255, alpha: 1),
+                                                     dark: UIColor(red: 10 / 255, green: 10 / 255, blue: 10 / 255, alpha: 1))
+    static let placeholderColor = UIColor.themeColor(light: UIColor(red: 0.6, green: 0.6, blue: 0.6, alpha: 1),
+                                                     dark: UIColor(red: 0.4, green: 0.4, blue: 0.4, alpha: 1))
+    static let systemMessageBackgroundColor = UIColor.themeColor(light: UIColor.rgb(red: 248, green: 248, blue: 248), dark: UIColor(white: 0.2, alpha: 0.5))
 }
 
 enum SystemColor {

deltachat-ios/View/ChatTitleView.swift

@@ -43,7 +43,7 @@ class ChatTitleView: UIView {
         subtitleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0).isActive = true
     }
 
-    func updateTitleView(title: String, subtitle: String?, baseColor: UIColor = .darkText) {
+    func updateTitleView(title: String, subtitle: String?, baseColor: UIColor = DcColors.defaultTextColor) {
         subtitleLabel.textColor = baseColor.withAlphaComponent(0.95)
         titleLabel.textColor = baseColor
         titleLabel.text = title

deltachat-ios/View/ContactCell.swift

@@ -47,7 +47,7 @@ class ContactCell: UITableViewCell {
         let label = UILabel()
         label.font = UIFont.systemFont(ofSize: 16, weight: .medium)
         label.lineBreakMode = .byTruncatingTail
-        label.textColor = UIColor(hexString: "2f3944")
+        label.textColor = DcColors.defaultTextColor
         // label.makeBorder()
         return label
 
@@ -82,19 +82,10 @@ class ContactCell: UITableViewCell {
         return view
     }()
 
-    var darkMode: Bool = false {
-        didSet {
-            if darkMode {
-                contentView.backgroundColor = UIColor.darkGray
-                nameLabel.textColor = UIColor.white
-                emailLabel.textColor = UIColor.white
-            }
-        }
-    }
-
     override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
         super.init(style: style, reuseIdentifier: reuseIdentifier)
         selectionStyle = .none
+        contentView.backgroundColor = DcColors.chatBackgroundColor
         setupSubviews()
     }
 
@@ -162,7 +153,6 @@ class ContactCell: UITableViewCell {
             let tap = UITapGestureRecognizer(target: self, action: #selector(onAvatarTapped))
             avatar.addGestureRecognizer(tap)
         }
-
     }
 
     func setVerified(isVerified: Bool) {

deltachat-ios/View/ContactDetailHeader.swift

@@ -5,7 +5,6 @@ class ContactDetailHeader: ContactCell {
         super.init(style: .default, reuseIdentifier: nil)
         let bg = UIColor(red: 248 / 255, green: 248 / 255, blue: 255 / 255, alpha: 1.0)
         backgroundColor = bg
-        darkMode = false
         selectionStyle = .none
     }