[Vuetify] 자주 사용하는 색상 네이밍 지정하기

src/plugins/vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import colors from 'vuetify/lib/util/colors';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        RED: '#fc3d5d',
        BLUE: '#348ed8',
      },
    },
  },
});

vuetify 설정파일에 theme.themes.light 밑에 '사용할 이름': '색상' 으로 선언해주면 색상을 네이밍으로 편하게 사용 할 수 있다.

 

example

<div class="RED--text">테스트</div>