Dark Mode: Add support for icons (#290)

* [DarkMode] Add comments and rearrange flex color header

* [DarkMode] Load icons as templates

* This will allow us to tint them appropriately for dark mode

* [DarkMode] Add support for dark mode for the icons

* [DarkMode] Add support for dark mode for hierarchy indent

* [DarkMode] Add dark mode support for property editor

Classes/Editing/ArgumentInputViews/FLEXArgumentInputTextView.m

@@ -6,6 +6,7 @@
 //
 //
 
+#import "FLEXColor.h"
 #import "FLEXArgumentInputTextView.h"
 #import "FLEXUtility.h"
 
@@ -24,8 +25,8 @@
     if (self) {
         self.inputTextView = [[UITextView alloc] init];
         self.inputTextView.font = [[self class] inputFont];
-        self.inputTextView.backgroundColor = [UIColor whiteColor];
-        self.inputTextView.layer.borderColor = [[UIColor blackColor] CGColor];
+        self.inputTextView.backgroundColor = [FLEXColor systemBackgroundColor];
+        self.inputTextView.layer.borderColor = [[FLEXColor borderColor] CGColor];
         self.inputTextView.layer.borderWidth = 1.0;
         self.inputTextView.autocapitalizationType = UITextAutocapitalizationTypeNone;
         self.inputTextView.autocorrectionType = UITextAutocorrectionTypeNo;
@@ -110,6 +111,18 @@
     return fitSize;
 }
 
+#pragma mark - Trait collection changes
+
+- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
+#if FLEX_AT_LEAST_IOS13_SDK
+    if (@available(iOS 13.0, *)) {
+        if (previousTraitCollection.userInterfaceStyle != self.traitCollection.userInterfaceStyle) {
+            self.inputTextView.layer.borderColor = [[FLEXColor borderColor] CGColor];
+        }
+    }
+#endif
+}
+
 
 #pragma mark - Class Helpers
 

Classes/Toolbar/FLEXExplorerToolbar.m

@@ -48,6 +48,7 @@
         
         UIImage *dragHandle = [FLEXResources dragHandle];
         self.dragHandleImageView = [[UIImageView alloc] initWithImage:dragHandle];
+        self.dragHandleImageView.tintColor = [FLEXColor iconColor];
         [self.dragHandle addSubview:self.dragHandleImageView];
         
         UIImage *globalsIcon = [FLEXResources globeIcon];

Classes/Toolbar/FLEXToolbarItem.m

@@ -6,6 +6,7 @@
 //  Copyright (c) 2014 Flipboard. All rights reserved.
 //
 
+#import "FLEXColor.h"
 #import "FLEXToolbarItem.h"
 #import "FLEXUtility.h"
 
@@ -37,6 +38,7 @@
     toolbarItem.image = image;
     [toolbarItem setAttributedTitle:attributedTitle forState:UIControlStateNormal];
     [toolbarItem setImage:image forState:UIControlStateNormal];
+    [toolbarItem.imageView setTintColor:[FLEXColor iconColor]];
     return toolbarItem;
 }
 

Classes/Utility/FLEXColor.h

@@ -13,15 +13,22 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface FLEXColor : NSObject
 
+// Background colors
 + (UIColor *)systemBackgroundColor;
 + (UIColor *)systemBackgroundColorWithAlpha:(CGFloat)alpha;
+
 + (UIColor *)secondaryBackgroundColor;
 + (UIColor *)secondaryBackgroundColorWithAlpha:(CGFloat)alpha;
-+ (UIColor *)scrollViewBackgroundColor;
 
+// Text colors
 + (UIColor *)primaryTextColor;
 + (UIColor *)deemphasizedTextColor;
 
+// UI element colors
++ (UIColor *)scrollViewBackgroundColor;
++ (UIColor *)iconColor;
++ (UIColor *)borderColor;
+
 @end
 
 NS_ASSUME_NONNULL_END

Classes/Utility/FLEXColor.m

@@ -24,6 +24,8 @@ static UIColor *colorWithDynamicProvider(UIColor *lightColor, UIColor *darkColor
     return lightColor;
 }
 
+#pragma mark - Background Colors
+
 + (UIColor *)systemBackgroundColor {
     return [self systemBackgroundColorWithAlpha:1.0];
 }
@@ -42,10 +44,7 @@ static UIColor *colorWithDynamicProvider(UIColor *lightColor, UIColor *darkColor
                                     [UIColor colorWithWhite:0.1 alpha:alpha]);
 }
 
-+ (UIColor *)scrollViewBackgroundColor {
-    return colorWithDynamicProvider([UIColor colorWithRed:239.0/255.0 green:239.0/255.0 blue:244.0/255.0 alpha:1.0],
-                                    [UIColor colorWithRed:16.0/255.0 green:16.0/255.0 blue:11.0/255.0 alpha:1.0]);
-}
+#pragma mark - Text colors
 
 + (UIColor *)primaryTextColor {
     return colorWithDynamicProvider([UIColor blackColor],
@@ -57,4 +56,21 @@ static UIColor *colorWithDynamicProvider(UIColor *lightColor, UIColor *darkColor
                                     [UIColor darkGrayColor]);
 }
 
+#pragma mark - UI Element Colors
+
++ (UIColor *)scrollViewBackgroundColor {
+    return colorWithDynamicProvider([UIColor colorWithRed:239.0/255.0 green:239.0/255.0 blue:244.0/255.0 alpha:1.0],
+                                    [UIColor colorWithRed:16.0/255.0 green:16.0/255.0 blue:11.0/255.0 alpha:1.0]);
+}
+
++ (UIColor *)iconColor {
+    return colorWithDynamicProvider([UIColor darkGrayColor],
+                                    [UIColor lightGrayColor]);
+}
+
++ (UIColor *)borderColor {
+    return colorWithDynamicProvider([UIColor blackColor],
+                                    [UIColor whiteColor]);
+}
+
 @end

Classes/Utility/FLEXResources.m

@@ -87,41 +87,43 @@ static const u_int8_t FLEXBinaryIcon2x[] = {0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a,
     [self imageWithBytesNoCopy:(void *)base##2x length:sizeof(base##2x) scale:2.0] : \
     [self imageWithBytesNoCopy:(void *)base length:sizeof(base) scale:1.0])
 
+#define FLEXImageTemplate(base) ([FLEXImage(base) imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate])
+
 #define FLEXRetinaOnlyImage(base) ([self imageWithBytesNoCopy:(void *)(base) length:sizeof(base) scale:2.0])
 
 + (UIImage *)closeIcon
 {
-    return FLEXImage(FLEXCloseIcon);
+    return FLEXImageTemplate(FLEXCloseIcon);
 }
 
 + (UIImage *)dragHandle
 {
-    return FLEXImage(FLEXDragHandle);
+    return FLEXImageTemplate(FLEXDragHandle);
 }
 
 + (UIImage *)globeIcon
 {
-    return FLEXImage(FLEXGlobeIcon);
+    return FLEXImageTemplate(FLEXGlobeIcon);
 }
 
 + (UIImage *)hierarchyIndentPattern
 {
-    return FLEXImage(FLEXHierarchyIndentPattern);
+    return FLEXImageTemplate(FLEXHierarchyIndentPattern);
 }
 
 + (UIImage *)listIcon
 {
-    return FLEXImage(FLEXListIcon);
+    return FLEXImageTemplate(FLEXListIcon);
 }
 
 + (UIImage *)moveIcon
 {
-    return FLEXImage(FLEXMoveIcon);
+    return FLEXImageTemplate(FLEXMoveIcon);
 }
 
 + (UIImage *)selectIcon
 {
-    return FLEXImage(FLEXSelectIcon);
+    return FLEXImageTemplate(FLEXSelectIcon);
 }
 
 + (UIImage *)jsonIcon

Classes/Utility/FLEXUtility.m

@@ -6,6 +6,7 @@
 //  Copyright (c) 2014 Flipboard. All rights reserved.
 //
 
+#import "FLEXColor.h"
 #import "FLEXUtility.h"
 #import "FLEXResources.h"
 #import <ImageIO/ImageIO.h>
@@ -95,7 +96,26 @@
     dispatch_once(&onceToken, ^{
         UIImage *indentationPatternImage = [FLEXResources hierarchyIndentPattern];
         patternColor = [UIColor colorWithPatternImage:indentationPatternImage];
+
+#if FLEX_AT_LEAST_IOS13_SDK
+        if (@available(iOS 13.0, *)) {
+            // Create a dark mode version
+            UIGraphicsBeginImageContextWithOptions(indentationPatternImage.size, NO, indentationPatternImage.scale);
+            [[FLEXColor iconColor] set];
+            [indentationPatternImage drawInRect:CGRectMake(0, 0, indentationPatternImage.size.width, indentationPatternImage.size.height)];
+            UIImage *darkModePatternImage = UIGraphicsGetImageFromCurrentImageContext();
+            UIGraphicsEndImageContext();
+
+            // Create dynamic color provider
+            patternColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
+                return (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight
+                        ? [UIColor colorWithPatternImage:indentationPatternImage]
+                        : [UIColor colorWithPatternImage:darkModePatternImage]);
+            }];
+        }
+#endif
     });
+
     return patternColor;
 }