[burstcamp] 다크모드 Switch 버튼 제공 (+iOS 15 대응)

이미지 클릭시 burstcamp githunb로 이동합니다.

 

 

이전에 다크모드를 구현했을 때는 시스템 설정을 따라가도록 만들었기 때문에

Color Asset만 Darkmode 설정을 해주면 따로 코드 작업을 하지 않아도 다크모드를 구현할 수 있었습니다.

 

이번에는 Switch 버튼으로 다크모드를 직접 앱에서 설정할 수 있도록 구현해야하기 때문에 코드작업이 필요했습니다.

(더불어,, 네비게이션바와 탭바도,,)

 

앱의 다크모드 설정 Flow는 

다운로드시 Light, 후에는 사용자 설정으로 따라갔기 때문에 UserDefaults에 정보를 저장하기로 했습니다.

 

UserDefaults에서 정보를 꺼내와서는 Appearance 라는 객체를 만들어 사용하였습니다. (light, dark)

 

 

다크모드 window 설정

스위치가 On/Off 될 때마다 window의 overrideUserInterfaceStyle 을 설정해주어야 했는데,

window 접근 방식이 달라져 다음 코드를 사용하였습니다.

windows deprecated

if let window = UIApplication.shared.connectedScenes.first as? UIWindowScene {
    let windows = window.windows.first
    windows?.overrideUserInterfaceStyle = appearance.userInterfaceStyle
}

 

overrideUserInterfaceStyle

https://developer.apple.com/documentation/uikit/uiview/3238086-overrideuserinterfacestyle

Apple Developer Documentation

The user interface style adopted by the view and all of its subviews.

 

선택한 View와 모든 SubView의 userInterfaceStyle을 지정할 수 있는 변수입니다.

window의 overrideUserInterfaceStyle을 지정하면 모든 View들의 다크모드 스타일이 한번에 바뀌는 시스템이기 때문에 

저희는 전체 앱의 모드를 바꿔야해서 window의 스타일을 지정했습니다.

 

여기까지는 매우 간단한 작업이었습니다.

 

 

하지만 시뮬레이터를 돌려보니

탭바는 검정이 되고, 네비게이션바는 스크롤하면 반투명..?

원하던 결과가 나오지 않았습니다. 아이곡

 

tintColor, barTintColor, backgroundColor 설정을 모두 건드려봤지만 원하는 결과는 얻을 수 없었습니다.

 

NavigationBar

https://developer.apple.com/forums/thread/682420

barTintColor not working in iOS 15 | Apple Developer Forums

선택된 답변 선생님의 말씀을 보면

iOS 15에서 UIKit이 scrollEdgeAppearance가 확장되면서,

네비게이션 바가 기본적으로 투명한 배경을 제공하도록 되었다고 합니다. (더불어 border line도 사라지게)

 

그래서 iOS 15이상에 대응되도록 UINavigationBarAppearance를 사용해 scrollEdgeAppearance를 구현해주었습니다.

네비게이션 컨트롤러를 선언하는 곳에 다음 코드를 설정해주었습니다.

if #available(iOS 15.0, *) {
    let navigationBarAppearance = UINavigationBarAppearance()
    navigationBarAppearance.configureWithDefaultBackground()
    navigationBarAppearance.backgroundColor = .background
    self.navigationController.navigationBar.standardAppearance = navigationBarAppearance
    self.navigationController.navigationBar.scrollEdgeAppearance = navigationBarAppearance
}

 

 

TabBar

 

탭바도 네비게이션바와 같이 UITabBarAppearance를 사용해 iOS 15이상을 대응해주어야 했습니다.

if #available(iOS 15.0, *) {
    let tabBarAppearance = UITabBarAppearance()
    tabBarAppearance.configureWithDefaultBackground()
    tabBarAppearance.backgroundColor = .background
    tabBarController.tabBar.standardAppearance = tabBarAppearance
}

 

 

 

 

 

 

 

 

 

https://borabong.tistory.com/12

[iOS] TabBar 탭바 배경색 바꾸는 방법 (+ iOS 15 추가) 🎨