ie 지원 안함
prefers color scheme: AOS 10, iOS13 이후로 지원이 되고, 사용자가 앱만 다크모드로 쓰고 싶은 경우에는 결국 사용하기가 애매할 수 있음.
CSS Varialbe 예제
:root {
--main-bg-color: brown;
}
.one {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 50px;
height: 50px;
display: inline-block;
}
.two {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: inline-block;
}
.three {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 75px;
}
.four {
color: white;
background-color: var(--main-bg-color);
margin: 10px;
width: 100px;
}
js로 CSS Variable 접근
.five {
background-color: var(--main-bg-color);
}
// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");
// 어느 곳에서나 변수 얻기
getComputedStyle(element).getPropertyValue("--my-var");
// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);
CSS Variable이 지원안되는 경우 fallbock code
.adaptive-color-900 {
color:$grey900;
color:var(--adaptiveGrey900);
}
lightMode에서 darkMode로 전환되는 순간 흰색 화면이 나오는 버그가 있어, 사용자 경험에 좋지 않았다고 합니다. 그래서 결국 SSR 할때 동적으로 CSS를 내려주었고, 그때를 위한 캐시 정책도 소개 하고 있습니다.