다크모드를 구현해보자.

거 코딩하기 딱 좋은 날씨구먼.

배경이 검은색이면 기부니가 조커든요~

• 번인 때문에 어느 순간부터 트렌드가 되어버린 다크모드. 처음엔 불끄고 폰 보는 느낌이라 눈이 아팠지만 적응되니 오히려 흰색 배경 사이트는 눈이 더 아프더라고요. 저 자신을 위해서라도 반드시 구현하고자 마음먹었습니다.

.overrideUserInterfaceStyle 프로퍼티 설정하기

• 열심히 구글링하고 챗GPT한테 물어보기도 하면서 자료를 열심히 찾았습니다. 다크모드를 활성화하기 위해서는 UIWindow의 overrideUserInterfaceStyle 속성을 바꿔야된다고 하더라고요. 근데 옛날 코드 기반이라 Appdelegate의 window를 활용했기에 좀 코드를 손봐야 했습니다.
• 우선, 다크모드/일반 화이트모드를 번갈아가면서 바꿀 수 있는 버튼을 만들어줬습니다. let으로 선언해도 동작은 하나, 내부에서 self를 참조하므로 lazy var로 선언해줍니다.

    lazy var darkmodeSwitch : UISwitch = {
       let settings = UISwitch()
        settings.isUserInteractionEnabled = true
        settings.addTarget(self, action: #selector(onClickSwitch), for: .touchUpInside)
        return settings
    }()

• 이후 UISwitch의 isOn 프로퍼티의 상태에 따라 overrideUserInterfaceStyle 프로퍼티 값을 바꿔줬습니다. ios 13이후부터 가능한 기능이기에 #available(iOS 13.0, *)를 써줬고 ios 13.0 이후부터는 Scene에서 window를 가져옵니다.

    @objc func onClickSwitch(_ sender : UISwitch) {
        if #available(iOS 13.0, *) {
           let windowScene = UIApplication.shared.connectedScenes.first as! UIWindowScene
            if sender.isOn {
                print("다크모드")
                windowScene.keyWindow?.overrideUserInterfaceStyle = .dark

            } else {
                print("화이트모드")
                windowScene.keyWindow?.overrideUserInterfaceStyle = .light

            }
        }
    }

• 자 이렇게 다 했으니, 잘 나오겠죠? 한번 볼까요?

??? 네비게이션 바만 변했습니다..

몇시간동안 왜 다크모드가 안되지? 너가 해달라는 대로 해줬잖아 울부짖다가 만 하루만에 stackoverflow 형님들께 답변을 받았습니다.

• 번역하자면

양키 형님 : 야 너가 보여준 코드(overrideUserInterfaceStyle 변경하는) 쓰면 정상적으로 다크모드 구현할 수 있어. 근데 너 무슨 색 씀?

나 : 안되는데 뭔 소리여. 배경은 흰색 쓰고 나머지는 검정색 썼는데?

양키 형님 : 야이 x신아. 그러니까 안되는거지. UIColor.white, UIColor.black은 사용자 환경에 반응하는 색이 아니야. .systemBackground, .Label을 사용해봐!

괜히 개발자 밈으로 해결책은 언제나 스택오버플로우와 인도의 오래된 강의라는 말이 나오는게 아닙니다. 전혀 모르고 있던 사실이었습니다. 양키 형님 말대로 .white -> .systemBackground, .black -> .label로 바꾼다음 다시 실행해보니 잘만 되더군요..

오늘의 삽질 교훈 : UIColor의 System 색들은 사용자 환경(다크모드/라이트모드)에 반응하여 그 색이 변한다. 모르면 스택오버플로우에 물어보자..(최대한 고민해보고)