SwiftUI - Color

안녕하세요 :D 망고입니다🥭

SwiftUI의 Color에 대해 알아보겠습니다.

Color

• Color.색상을 해주게 되면 원하는 색으로 변경됩니다.

Color.색상
ex) Color.red

 

기본적으로 사용할 수 있는 색상

extension Color {

    public static let red: Color

    public static let orange: Color

    public static let yellow: Color

    public static let green: Color

    @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
    public static let mint: Color

    @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
    public static let teal: Color

    @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
    public static let cyan: Color

    public static let blue: Color

    @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
    public static let indigo: Color

    public static let purple: Color

    public static let pink: Color

    @available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)
    public static let brown: Color

    public static let white: Color

    public static let gray: Color

    public static let black: Color

    public static let clear: Color

    public static let primary: Color

    public static let secondary: Color

 

💡 Color.primary는 라이트모드일때 검정색 다크모드일때 흰색으로 바뀐다.

 

UIColor

• Color에서 제공되지 않는 다양한 색들이 있습니다.
• 예를 들면 systemGray와 같은 Color들..

 

Color(UIColor.색상)
ex) Color(UIColor.secondarySystemBackground)

💡 UIColor.secondarySystemBackground는 라이트모드일때 옅은 회색 다크모드일때 진한 회색으로 바뀐다.

 

사용자 정의 컬러 만들기

Asset에서 오른쪽클릭 or 하단의 +버튼을 누른 뒤 New Color Set을 선택해주면

 

Color Set이 생성되는데 라이트모드, 다크모드에서 사용할 색상을 각각 정해줄 수 있다.

하나를 클릭한 다음 인스펙터 창을 열고, Show Color Panel을 누르면 다양한 방식으로 원하는 컬러를 만들어낼수있다.

Color(”색상이름”)을 해주게 되면 라이트모드, 다크모드일때 정해둔 색상 그대로 나오는 것을 확인할 수 있다.

Color("CustomColor")

+ Shadow

• shadow를 사용하면 그림자 효과를 통해 전문적인 느낌을 줄 수 있다.

.shadow(radius: 10)

그림자 색상과 위치도 정할 수 있다.