다크모드를 처리하는 두 가지 방식에 대해서 설명드립니다.
일반적인 방법은 "@media"태크의 "prefers-color-schem"를 사용하는 방법이며, 또 다른 방법은 "<link href=... />"에 사용하는 파일로딩 방식입니다.
스크립트 방식
시스템에 설정된 light, dark 모드에 따라서 스타일시트가 적용됩니다.
<style>
@media (prefers-color-scheme: dark) {
html, body {
background-color: black;
color: white;
}
}
@media (prefers-color-scheme: light) {
html, body {
background-color: white;
color: black;
}
}
</style>
파일로딩 방식
로딩한 파일중에서 시스템에 설정된 모드에 따라서 적용됩니다.
<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)" />
반응형
댓글