[Vue] Vuetify에 theme 색상 지정하기

이전 글에서 vuetify 설치에 대해 다루었다. vuetify에는 여러 기능이 있는데, 그 중에 theme 적용 및 색상 지정에 대해서 다루려 한다.

공홈 설명은 v2.vuetifyjs.com/en/customization/theme/를 참고하자.

Theme — Vuetify.js

vuetify를 설치한 직후라면 src/plugins/vuetify.js가 단순히 new Vuetify()를 export하는 상태일 것이다. 별도의 설정을 해주지 않아도 light theme가 적용되며, primary, secondary, error, success 등 기본적인 색상이 지정되어 있어 사용에 큰 불편함은 없다.

만약 dark 테마로 변경하고 싶거나, 색상을 커스텀으로 지정해주고 싶으면 vuetify.js 파일에서 설정해주면 된다.

dark 테마 적용

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    dark: true,
  },
})

요즘 dark 테마가 유행인데, 위와 같이만 써 주면 기본적인 dark 테마가 적용된다.

테마에 색상 custom 지정

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        accent: '#8c9eff',
        error: '#b71c1c',
        my_color: '#ffffff',
      },
    },
  },
})

themes에 light와 dark 등을 넣을 수 있는데, 이 때 지정되는 색상을 지정해줄 수 있다. 이후에 class="primary" 혹은 color="primary" 등으로 사용할 수 있다. 위에서 my_color와 같이 커스텀 키워드도 적용 가능하다.