iOS 18 widget tint mode 적용 방법(기존 코드 바꾸지 않고 적용하기)

iOS 18 이후부터 위젯을 사용자화 시켜 Tint 모드를 적용할 수 있어요. 
따라서 기존 다크모드 라이트모드만 적용시켜 놓은 앱들은 지정된 색상과 다른 색상이 표현되어,
제대로 위젯이 표현되지 않을 수 있어요. 오늘은 어떻게 마이그레이션 할지 같이 알아보아요.

2024/10/21 일 iOS 18.0.1 기준이에요. 

본론부터 바로 넘어갈게요!!!

WidgetConfiguration 프로토콜 부분에 

.containerBackgroundRemovable(false)

해당 옵션을 설정해 주면 원래 색상에 틴트가 적용되어 아주 잘 보여요. 

예시)

struct create_view: Widget {
    let kind: String = "CalendarWidget"


    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            calendar_widgetEntryView(entry:  entry)
        }
        .configurationDisplayName(Bundle.main.localizedInfoDictionary?["widget_monthly_calendar_title"] as? String ?? "Monthly Calendar")
        .description(Bundle.main.localizedInfoDictionary?["widget_monthly_calendar_description"] as? String ?? "You can check your partner’s schedule through a widget.")
        .supportedFamilies([.systemLarge])
        .containerBackgroundRemovable(false)
        .contentMarginsDisabledIfAvailable()
    }
}

 

Before

After 

 

 

만약 위의 옵션을 사용하지 않고, 개별로 적용하고 싶으시다면 아래처럼 따라 하시면 돼요. 

이미지를 원래 색상으로 보이게 하고 싶다면 아래 옵션을 적용해 주세요.
(이미지에만 적용되는 옵션이에요.)

.widgetAccentedRenderingMode(.fullColor)

 

 

이제 일반 뷰에서는 다른 옵션을 사용해야 해요. 
(실제로 써봤는데 무조건 Tint색상을 따라가기 때문에 어떤 뷰에 Accent표시를 할 건지 적용하는 옵션이라고 생각하면 돼요.)

Tint 모드에 영향을 받지 않도록 직접 색상 지정 (디폴트)
.widgetAccentable(false)


Tint 모드에 영향을 받도록 직접 색상 지정
.widgetAccentable(true)