[Vuejs] app 테마 바꾸기 (dark or light)

dark theme

light theme

VUE CLI 설치시 기본 CSS

Vue CLI로 프로젝트 생성시에 기본적으로 만들어지는 file인 base.css, main.css가 만들어질거에요.

base.css는 app 기본 css를 담당하는 파일입니다. 

base.css > main.css 로 구성되어 있습니다.

theme를 바꿀떄는 base.css 파일을 열어서 바꿉니다.

base.css에 theme 설정

@media (prefers-color-scheme: dark) {...}	// 어둡게
// or
@media (prefers-color-scheme: light) {...}	// 밝게