vuetify theme color 설정

Bootstarp도 그렇고, Vuetify도 그렇고 프레임워크들에는 기본적으로 사이트에서 쉽게 적용가능한 컬러테마가 몇가지 지정되어 있습니다. Vuetify는 plugins > vuetify.js 파일에서 그 값을 지정해 둘 수 있습니다. 기본적으로 인스톨을 마친 초기에는 아마도 다음과 같은 형식으로 되어 있을 것이라 생각됩니다.

인스톨 초기 상태의 vuetify.js

Vuetify 에서 제공하는 방법

이 상태에서 CSS를 경로를 새롭게 지정해주고, theme에서 필요로 하는 컬러값을 셋팅해 주면 사용가능한 상태가 됩니다. 이 방법은 개인적으로 SCSS파일 사용을 전제로 했었기에 택한 방법인 만큼 다른 방법도 있을 것이라 생각됩니다. 이 방법은 js파일에서 색상값만 바꾸면 자동으로 vuetify.scss에 적용되어 있는 기본 컬러값을 덮어씌우기를 해줍니다.

SCSS파일 추가와 theme를 추가시킨 vuetify.js

기준으로 잡은 값을 Vuetify에서 사용할때는 다음과 같으며, 텍스트와 백그라운드에 적용시키는 Class가 정해져 있습니다.

vue파일에 클래스를 적용할 경우의 예시

theme에서 지정한 명칭을 바꿔서 적용시키면 프로젝트에 사용하는 메인컬러, 서브컬러용으로 별도 클래스를 만들 수 있으니 참고 하시면 좋을 듯 합니다.

SCSS를 사용하는 방법도 있기는 합니다..

위와 같은 방법도 가능하지만, js파일을 건드리지 않고 SCSS의 mixin형식을 빌려서 다음과 같은 방식으로도 일단은 사용할 수 있습니다만 아무래도 js를 경유하여 작업하는 방법이 관리면에서 좋지 않을까 생각되기도 합니다.

SCSS에 클래스를 할당하여 vuetify.js를 대신하거나 같이 사용할 경우

좀더 자세한 사항을 익히시고 싶으신 분들은 공식문서를 일독하시기를 권합니다.