다크 모드
mdui의 모든 컴포넌트는 다크 모드를 지원하며, 운영 체제 설정에 따라 테마를 자동으로 전환하는 기능을 지원합니다.
문서 페이지 오른쪽 상단의
다크 모드를 사용하려면 <html> 태그에 mdui-theme-dark 클래스를 추가하기만 하면 됩니다:
<html class="mdui-theme-dark"></html>
테마가 운영 체제 설정에 따라 자동으로 전환되도록하려면 <html> 태그에 mdui-theme-auto 클래스를 추가하세요:
<html class="mdui-theme-auto"></html>
페이지의 다른 부분에 다른 테마를 사용할 수도 있습니다. 예를 들어 다음 예제에서는 <html>에 다크 모드를 설정했지만 페이지 내의 <div>에 mdui-theme-light 클래스를 추가하여 해당 div 내의 요소는 라이트 모드로 표시되고 페이지의 나머지 부분은 다크 모드로 표시됩니다:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- 여기는 라이트 모드 -->
</div>
<!-- 여기는 다크 모드 -->
</body>
</html>
CSS 클래스를 직접 추가하는 것 외에도 mdui는 테마를 더 편리하게 조작할 수 있는 두 가지 함수를 제공합니다:
mdui는 :root 및 .mdui-theme-light, .mdui-theme-dark, .mdui-theme-auto 선택기에 color 및 background-color 스타일을 설정합니다. 이러한 기본 스타일이 마음에 들지 않으면 직접 재정의할 수 있습니다.
다음 예제는 라이트 모드에서 페이지 배경을 순백색, 텍스트를 순검은색으로 설정하고, 다크 모드에서 페이지 배경을 순검은색, 텍스트를 순백색으로 설정합니다:
:root,
.mdui-theme-light {
color: #000;
background-color: #fff;
}
.mdui-theme-dark {
color: #fff;
background-color: #000;
}
@media (prefers-color-scheme: dark) {
.mdui-theme-auto {
color: #fff;
background-color: #000;
}
}
이 페이지의 목차