「어둠의 다크」 모드 써보기 (1)

안녕하세요 :) Zedd입니다.

어둠의 다크...모드를 써보겠습니다..

헉 근데 어둠의 다크 이거 드립인데..제드 얘 왜이래 라고 할 수 있는데..제가 만든 드립은 아니구요......이게 왜 웃긴거냐면.................

어둠이랑..다크랑...

아닙니다...

아 ㅋㅋㅋㅋㅋㅋㅋㅋㅁㅊ 나무위키 뭔 분석까지 해놨네 개웃겨

헉 여러분 그거 아시나요..?

오늘 저의 vlog가 올라갔다는 사실..

응 안봐

ㅠ

암튼;;; 다크모드 써보겠음

ㅎㅇ

Xcode 11 변경사항에 대해 다들 알고계시죠,,?

누가 잘 정리한 글이 있던데...

Xcode 11 Beta release note

ㅎ;

다크모드 관련된것만 다시 한번 같이 봅시다.

environment Overrides라고 하는데요 이번에 이게 생겼죠. 

on off로 개편하게 다크모드, dynamic type, accesibility등을 조절할 수 있음.

쿸ㅋ쿸ㅋㅋㅋ쿸ㅋㅋ

그럼 앱 실행 꼭 해야함?:;;

ㄴㄴ

스토리보드 하단에 저거 누르면

이게 뜰텐데,

interface style을 이용하여 스토리보드상에서도 다크모드를 볼 수 있다는 사실..

.

한 스토리보드 안에 있는 모든 ViewController Scene이 전부 변경되므로 참고하세여

아;; 아니 나는;;; 한 ViewController만 어둠의 다크였음 좋겠는데요?

어둠의 다크로 만들고싶은 viewController클릭 > Attribute inspector > interface style > Dark를 하게되면!?

이러케도 할 수 이따.

이건 스토리보드에서만 바꿔주는거고, interface style을 여기서 dark로 해줬다고 진짜 디바이스나 시뮬레이터에서도 dark로 변하는건 아닌거 같애요. dark로 하고 시뮬레이터 돌려봐도 light로 되어이씀 흠 아닐수도 있어욘..

오 이렇게 하면 색깔이 바뀌는구나?!?!? 

아마 이 viewController의 interface style이 inferred라서 그런듯..?

여기서 아주 예리한...분들은 눈치를 채셨을지도 모르지만

background색상이 다르죠!?

두 ViewController둘 다 system background로 색상이 동일한데 말이에요.

근데도 오른쪽 view가 좀 더 light한 색상이군요. 

도대체 이게 무슨일일까여ㅛ!?!?

왜냐면 다크모드는 2가지 레벨로 디자인 되었기 때문이죠.

view가 whole screen을 edge까지 채우면 base level, 분리되어있으면(separated) elevated level이라고 해요.

Implementing Dark Mode on iOS를 들으면 presentedView가 elevated level로 취급되어 system background color만 적용해놓으면 알아서 다 이러케 해준다~~ 라고 하는 것 같습니다. 

확실히 색상 다른거 아시겠져

색상이 달라서 잠깐 다른이야기로 샛는데, system Background color얘네는

interface style에 따라 색상을 바꿔줍니다!

하지만

interface style이 dark인데 background를 white로 주면..이런일이 발생하게 되죠.

암튼 system background 친구들은 알아서 light, dark모드에 따라 색상이 dynamic하게 변합니다.

background Color는 3가지 종류가 있지만

이렇게?

Text에는 4가지 색상이 추가(?)되었습니다.

Text에 추가되었다니까 뭔가 말을 제대로 하는건지 모르곘는데? background에도 적용 할 수 있으니까./.암튼 Apple이 Label Color으로 낸 게 4가지입니다.

위에서 white로 view의 bakground를 줬을 때 dark mode에서도 white였죠? 

왜냐면 color가 white라는 single value만 가지고 있기 때문입니다.

dark mode에서 색상을 바꿔주고싶다면 

dynamic color를 사용해야합니다.

그럼 하나 해볼까연?

난...light mode에서는...검은색인데..dark mode에서는 노란색을 띄우게 해주고싶음ㅎ

asset에 가서 New Color Set을 하고 색상을 추가해주세요.

오른쪽에 Appearance가 있는데, Dark를 눌러주면

이렇게 color가 하나 더 생깁니다.

전 system yellow color를 추가해줘씁니댜

그리구 저렇게 Label color를 방금 만들어놓은..제 color로 지정!

그럼 이렇게 됩니다.

ㅋ.ㅋ.ㅋㅋ..ㅋ.ㅋ.ㅋ.ㅋㅋ...ㅋ

개쉬움 ㄹㅇ

이미지로 가봅시다.

첫번째로 색상. 

색상은 위에서 한거랑 똑같습니다

tint color를 바꿔줘야 한다는 점이 다르긴 하지만요.

위에서 light mode일땐 검정색(Label Color를 줬습니다), dark mode일땐 system yellow color를 줬었는데,

잘 적용이 된 것 같네요.

그럼 light mode일때는 

어떤 A이미지이지만, dark mode일때는 또 다른 B이미지를 보여주고싶다면

역시나 asset에 가서, 

appearance를 눌러주고 Dark를 눌러줍니다.

역시나 뭔가 생겼군요. 여기에 dark mode일때 보여줄 이미지를 넣어볼게요.

이러케

그러면?!?!

이렇게 interface style에 따라 달라지는 것을 볼 수 있죠!!!

악 오늘 왜이렇게 집중이 안되지 ㅎ

다음엔 코드로 하는 법을 공부해볼게요. 위 내용은 전부!!!!!

Implementing Dark Mode on iOS에 나와있으니 꼭!!!!!!!! 꼮 보세요