Managing colors with extensions in Swift
Tags: swift, javascript
Published: 2019-05-12 08:24:58

---
title: Managing colors with extensions in Swift
published: true
tags: Swift,JavaScript
canonical_url: https://tyhopp.com/notes/color-extensions-swift
---

As a full-time developer on the web and part-time dabbler in the world of iOS development, I recently tried to create some color variables to use throughout a project in a single location. In most web development projects, you might put these inside a `utils` folder and `import` them wherever they are needed:

Define color variable:

```javascript
// utils/colors.js

export const dark = '#151951' // Default for all text
```

Use the variable:

```javascript
// components/container.js

import { dark } from '../utils/colors'

const Container = () => {
	return <p style=`color: ${dark}`></p>
}

export default Container
```

But in iOS development with Swift, there’s a problem with this. Unlike on the web, you don’t explicitly declare what you are importing and exporting in each file. Instead, methods of classes just magically become available throughout the project. While convenient, how will others reading your code know where the methods are coming from?

We could [use a Swift protocol](https://medium.com/@KaushElsewhere/better-way-to-manage-swift-extensions-in-ios-project-78dc34221bc8) and namespace all the utils in the same class, or do something a bit simpler which I prefer: prepend an `_` before all extensions so we know they’re custom utility functions. The same example above would then look like this, using [extensions in Swift](https://docs.swift.org/swift-book/LanguageGuide/Extensions.html):

> The usage of hex values for colors in iOS development requires some extra computation with `UIColor` because Apple doesn’t accept hex values directly. See dozens of different implementations of this [on StackOverflow](https://stackoverflow.com/questions/24263007/how-to-use-hex-color-values). The following approach is borrowed from [Jared Davidson](https://www.youtube.com/watch?v=HPhqO0D1tG4), and the emoji logging idea from [Andyy Hope’s Pretty in Print series](https://medium.com/swift-programming/swift-prettify-your-print-statements-pt-1-64832bb7fafa).

Define color variable:

```swift
// Colors.swift

import UIKit

extension UIColor {
  
	// Defined colors
  static let _dark = UIColor().hex("#151951")
  
  func hex(_ hex: String) -> UIColor {
    
    // Clean string
    var hexString = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()
    
    // Remove hash
    if hexString.hasPrefix("#") {
      hexString.remove(at: hexString.startIndex)
    }
    
    // Log warning if hex value is not 6 characters
    if hexString.count != 6 {
      print("⚠️ Hex value #\(hexString) is not 6 characters.
      Please enter a value with 6 characters.")
      return UIColor.white
    }
    
    var rgb: UInt32 = 0
    Scanner(string: hexString).scanHexInt32(&rgb)
    
    return UIColor.init(
      red: CGFloat((rgb & 0xFF0000) >> 16) / 255.0,
      green: CGFloat((rgb & 0x00FF00) >> 8) / 255.0,
      blue: CGFloat(rgb & 0x0000FF) / 255.0,
      alpha: 1.0
    )
  }
}
```

Use the color variable:

```swift
// CustomLabel.swift

import UIKit

class CustomLabel: UILabel {
  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    self.textColor = UIColor._dark
  }
}
```

As I’m rapidly realizing, things you can do simply on the web with JavaScript don’t often come for free in iOS with Swift. This may be due to the relative newness of the language, particular design choices made by the architects, or a mix of both.

While I know it’s not exactly helpful to apply web thinking to a native iOS context, I find it useful to compare and contrast implementations as I’m learning to write more idiomatic Swift. Hopefully, I’ll come out a better software developer at the end of the day.

Cheers! 🍻