티스토리 뷰

🍏/iOS

[CSS] WKWebview DarkMode 대응

eungding 2020. 12. 8. 20:53
반응형

Supporting Dark Mode in Your Web Content WWDC 영상을 보고 테스트해본 기록 ✏️

 

웹뷰를 다크모드 대응해주기 위해 

CSS쪽에서 간단한 대응을 해주면 됩니다..! 

 

[ 준비 ]

 

아래와 같이 테스트할 준비를 해주세요

저 URL이 내려주는 CSS를 바꿔가면서 테스트 해볼게요

 

 

[ 기본 CSS ] 

 

이렇게 생긴 CSS가 있다고 해보겠습니다. 

참고로 <style> </style> 태그 안에 css코드를 넣는 것보다 

 

stylesheet.css 파일을 따로 만들고 

아래와 같이 css를 넣어주는게 더 좋은 방법이에요!+! 

 

<head>

<link rel="stylesheet" href="stylesheet.css">

</head>

 

 

저는 테스트니까 이렇게 할게요 

 

 

테스트해보면 다크모드 반영이 안됩니다. 

 

 

 

[ 다크모드 대응 CSS ]

 

애플에서 추가해주라는 것을 추가해볼게요

이것을 CSS에 추가하면 다크/라이트 모드를 구분할 수 있고 기본 반전 컬러가 적용됩니다. 

 

 

 

다크모드 반영이 잘됩니다.

 

 

 

이번에는 기본 반전 컬러말고 

원하는 컬러를 지정해볼게요=! 

라이트모드일때는 빨간색, 

다크모드일때는 초록색으로 나오게 해볼게요

 

 

이것도 잘됩니다! 

 

 

 

 

[ Reference ]

 

github.com/kharrison/CodeExamples/tree/main/DynamicWebKit/DynamicWebKit

 

kharrison/CodeExamples

Code Examples. Contribute to kharrison/CodeExamples development by creating an account on GitHub.

github.com

 

반응형
저작자표시

'🍏 > iOS' 카테고리의 다른 글

[iOS] viewDidLoad 실험  (0) 2021.03.17
[iOS] XCode Build System 이해하기  (2) 2021.02.15
[Dark Mode] Dynamic Color의 원리 / cgColor 대응  (0) 2020.12.02
[Alamofire] PostMan과 Alamofire에서 302 코드 받기  (0) 2020.09.14
[JSONDecoder] DateDecodingStrategy 사진 추천  (0) 2020.09.04
공유하기 링크
댓글