웹사이트에서 다크모드 대응시 핵심 사항이다.
다크모드를 구현하는 다양한 코드가 유통되고 있지만, 안드로이드 디바이스의 웹뷰를 고려했을 때 잘 먹히지 않는 경우가 많다.
다음 사항을 고려하면 안드로이드 웹뷰를 포함한 거의 모든 디바이스에서의 다크모드 구현이 안정적으로 구현된다.
우선 title 밑에 다음 코드를 기입할 것.
<script>
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: Dark)').matches console.log(prefersDark);
</script>
그 다음은 style이 시작 되는 부분에 다음 코드를 기입할 것.
/** For Dark mode 2021-10-01 */
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
그런 다음 일반환경(화이트모드)에서 구현될 css 들을 작성한다.
화이트모드 css를 위한 모든 표현이 끝났으면 다크모드를 위한 표현을 다음과 같이 시작한다.
@media (prefers-color-scheme: dark) {
/* 아래 root는 권장사항이지만 꺼도 된다 */
/*:root {
--wp-dark-mode-neutral-background: #1f2020;
--wp-dark-mode-neutral-text: #d6d0c6;
--wp-dark-mode-selection-background: #15539c;
--wp-dark-mode-selection-text: #e5e0d8;
}*/
body {
background: #242525;
color: #bbb;
}
h1, h2,h3, p, a {
color: rgb(255, 255, 255) !important;
-webkit-text-fill-color: rgb(255, 255, 255) !important;
}
/* 상기의 body, h1, h2...처럼
필요한 사항들을 아래 주욱 이어서 표현
*/
}
상기 body, h1, h2…처럼 필요한 css들을 아래 이어서 표현한다. 그 외에도 원하는 클래스 등 다크모드에서 구현되기를 원하는 모든 css를 작성하면 작성된 그대로 다크모드에서 읽힌다.
그러니까 이전 구간에서는 화이트 모드의 css가 적용되고 @media (prefers-color-scheme: dark) { 안의 css는 다크모드시에 읽히는 것들이다.
가령 동일한 클래스 명을 상기의 두 영역에 구별지어 작성하면 두 개의 레이아웃이 화이트/다크모드 신호에 따라 구현되는 것.
