SwiftUI: 컬러테마 추가하기

목적 : iOS에서 커스텀 컬러를 사용하기 위함

• 컬러테마를 추가하는 방법에는 xcode에서 컬러 테마를 직접 생성 및 코드상 작업을 하거나 코드상에서만 작업하는 방법이 있다.
• 이번 글에서는 코드상에서만 작업 하는 것으로 결정했다.

1. Color 객체 확장하기

• hexcode를 사용하기위해서는 Color 객체를 확장해야 함으로 Color.swift 파일에 다음을 작성한다.

extension Color {
    init(hex: String) {
      let scanner = Scanner(string: hex)
      _ = scanner.scanString("#")
      
      var rgb: UInt64 = 0
      scanner.scanHexInt64(&rgb)
      
      let r = Double((rgb >> 16) & 0xFF) / 255.0
      let g = Double((rgb >>  8) & 0xFF) / 255.0
      let b = Double((rgb >>  0) & 0xFF) / 255.0
      self.init(red: r, green: g, blue: b)
    }
}

2. 이후 컬러 객체를 지정해준다.

extension Color {
    static let GREEN_100  = Color(hex: "#55efc4")
    static let GREEN_200 = Color(hex: "#81ecec")
    static let GREEN_300 = Color(hex: "#00cec9")
    static let GREEN_400 = Color(hex: "#00b894")
    
    static let PRIMARY_100  = Color(hex: "#74b9ff")
    static let PRIMARY_200 = Color(hex: "#a29bfe")
    static let PRIMARY_300 = Color(hex: "#0984e3")
    static let PRIMARY_400 = Color(hex: "#6c5ce7")
    
    static let GRAY_100  = Color(hex: "#dfe6e9")
    static let GRAY_200  = Color(hex: "#b2bec3")
    static let GRAY_300  = Color(hex: "#636e72")
    static let GRAY_400  = Color(hex: "#2d3436")
}

3. 완성된 Color.swift파일

import Foundation
import SwiftUI
import UIKit

extension Color {
    init(hex: String) {
      let scanner = Scanner(string: hex)
      _ = scanner.scanString("#")
      
      var rgb: UInt64 = 0
      scanner.scanHexInt64(&rgb)
      
      let r = Double((rgb >> 16) & 0xFF) / 255.0
      let g = Double((rgb >>  8) & 0xFF) / 255.0
      let b = Double((rgb >>  0) & 0xFF) / 255.0
      self.init(red: r, green: g, blue: b)
    }
}

extension Color {
    static let GREEN_100  = Color(hex: "#55efc4")
    static let GREEN_200 = Color(hex: "#81ecec")
    static let GREEN_300 = Color(hex: "#00cec9")
    static let GREEN_400 = Color(hex: "#00b894")
    
    static let PRIMARY_100  = Color(hex: "#74b9ff")
    static let PRIMARY_200 = Color(hex: "#a29bfe")
    static let PRIMARY_300 = Color(hex: "#0984e3")
    static let PRIMARY_400 = Color(hex: "#6c5ce7")
    
    static let GRAY_100  = Color(hex: "#dfe6e9")
    static let GRAY_200  = Color(hex: "#b2bec3")
    static let GRAY_300  = Color(hex: "#636e72")
    static let GRAY_400  = Color(hex: "#2d3436")
}

4. 적용해보기

• 다음과 같이 적용이 가능하다.

   var body: some View {
        Rectangle()
            .scaledToFill()
            .foregroundColor(.GRAY_400)
            .edgesIgnoringSafeArea(.all)
    }