다크 모드
다크 모드 (Dark Mode)
출처: 문서
본문
2.2.0 버전부터 Element Plus가 다크 모드를 지원해요! 필요한 모든 변수를 추출하고 통일해서 CSS Vars 기반으로 다크 모드를 구현할 수 있게 했어요.
어떻게 켤까요?
먼저 html에 dark 클래스를 토글하는 스위치를 만들면 돼요. 다크 모드만 필요하다면 html에 dark 클래스를 추가하기만 하면 됩니다.
<html class="dark">
<!-- ... -->
</html>
토글하고 싶다면 VueUse의 useDark 사용을 추천해요. 그다음 엔트리 파일에서 CSS를 한 줄 import 하면 바로 활성화할 수 있어요.
main.ts
// if you just want to import css
import 'element-plus/theme-chalk/dark/css-vars.css'
예제가 필요하다면 element-plus-vite-starter를 참고하세요.
커스텀 변수
CSS로
CSS Vars로 간단히 오버라이드하면 돼요. 예를 들어 새 파일 styles/dark/css-vars.css를 만들었다고 해 볼게요.
html.dark {
/* custom dark bg color */
--el-bg-color: #626aef;
}
그리고 Element Plus 스타일 뒤에 import 하면 돼요.
main.ts
import 'element-plus/theme-chalk/dark/css-vars.css'
import './styles/dark/css-vars.css'
SCSS로
SCSS를 사용한다면 SCSS 파일을 import 해서 컴파일할 수도 있어요. 자세한 내용은 Theming을 참고하세요.
styles/element/index.scss
/*just override what you need*/
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
$bg-color: (
'page': #0a0a0a,
'': #626aef,
'overlay': #1d1e1f,
)
);
main.ts
import './styles/element/index.scss'
// or just want to import scss?
// import 'element-plus/theme-chalk/src/dark/css-vars.scss'