Karice의 여행 & 코딩 블로그

상황

v-btn의 버튼색과 글자색을 각각 바꾸고 싶었다.

primary나 error같은 기본으로 설정된 색이 아니라, 내가 원하는 색으로.

해결방법

먼저 표준 색상을 알아보자.

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
    
Vue.use(Vuetify);
    
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#14C6FF", //기본
        secondary: "#424242", //기본
        accent: "#82B1FF", //기본
        error: "#FF5252",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#FFC107",
        lightblue: "#14c6FF",
        yellow: "#FFCF00",
        pink: "#FF1976",
        orange: "#FF8657",
        magenta: "#C33AFC",
        darkblue: "#1E2D56",
        gray: "#909090",
        neutralgray: "#9BA6C1",
        green: "#2ED47A",
        red: "#FF5c4E",
        darkblueshade: "#308DC2",
        lightgray: "#BDBDBD",
        lightpink: "#FFCFE3",
        white: "#FFFFFF"
      }
    }
  }
});

이 위에 적혀있는 gray, white이런 색들은 그냥 바로 입력하면 된다.

그 외의 색은 어떻게 할까?

코드

기존에 설정된 색 사용

<v-btn 
	color="primary" //버튼색 변경
	class="red--text" //글자색 변경 --text 붙여주기
>

커스텀한 색 사용

<v-btn
  color="rgba(105, 128, 150, 1)" //버튼색 변경
  class="" //텍스트는 색을 지정해주고 --text를 설정해줘야한다. 
>

참고

https://cyworld.tistory.com/5586