색상 (Colors)

stylusjavascript 를 통해 Material Design spec 에 있는 모든 색상을 바로 사용할 수 있습니다. 이 값들은 스타일 시트, 컴포넌트 파일 그리고 실제 컴포넌트 안에서 *color class시스템을 통해 사용될 수 있습니다.

클래스

메테리얼 디자인 스펙의 각 색상은 어플리케이션 내에서의 클래스를 이용한 스타일 지정을 위해서 backgroundtext 변형으로 변환됩니다. 예) <div class="red"> 또는 <span class="red--text">. 이 색상 클래스는 여기에 정의되어 있습니다.

텍스트 색상 역시 어둡게(darken)밝게(lighten) 만드는 변형(variants)을 text--{lighten|darken}-{n} 형식으로 지원합니다.

자바스크립트 색상 팩(Javascript color pack)

Vuetify는 추가로 어플리케이션 내에서 임포트(import) 해서 사용할 수 있는 자바스크립트 색상 팩을 지원합니다. 이는 어플리케이션 테마를 정의하는데 사용될 수도 있습니다.

// src/index.js

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

// Helpers
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
  theme: {
    primary: colors.red.darken1, // #E53935
    secondary: colors.red.lighten4, // #FFCDD2
    accent: colors.indigo.base // #3F51B5
  }
})

스타일러스 색상 팩(Stylus color pack)

편의상 색상팩을 사용하면 export 되는 css 사이즈가 ~30kb 정도 증가합니다. 어떤 프로젝트들은 Vuetify 부트스트랩에 의해 런타임에 기본적으로 생성되는 클래스를 사용하는 것으로 충분할 겁니다. 이 기능을 비활성하려면 수동으로 import하고 메인 stylus 파일을 생성해야만 합니다. 이를 위해서 stylus loader.style 파일 엔트리(file entry)가 필요합니다.

// src/assets/stylus/main.styl

$color-pack = false

@import '~vuetify/src/stylus/main'

생성된 main.styl 파일을 프로젝트에 포함해야 합니다.

// src/index.js

import './assets/stylus/main.styl'
// or
require('./assets/stylus/main.styl')

반드시 stylus를 사용할 수 있도록 웹팩(webpack)을 설정하세요. Vuetify에서 제공하는 미리 만들어진 템플릿들을 사용하고 있다면 이미 그렇게 설정되어 있을 것입니다.

메인 App.vue 에서 main.style를 바로 로딩할 수도 있습니다. 이 방법은 엔트리 파일이 변경될때 마다 스타일러스 파일을 재생성하기 때문에, 프로젝트 설정에 따라 빌드 시간이 (아마도) 늘어날 수 있다는 점을 기억하세요.

<style lang="stylus">
  $color-pack = false

  @import '~vuetify/src/stylus/main'
</style>

메테리얼 색상표 (Material colors)

아래 리스트는 주색상으로 묶은 메테리얼 디자인 색상 팔레트 입니다.

red

red 
#F44336
red lighten-5
#FFEBEE
red lighten-4
#FFCDD2
red lighten-3
#EF9A9A
red lighten-2
#E57373
red lighten-1
#EF5350
red darken-1
#E53935
red darken-2
#D32F2F
red darken-3
#C62828
red darken-4
#B71C1C
red accent-1
#FF8A80
red accent-2
#FF5252
red accent-3
#FF1744
red accent-4
#D50000

pink

pink 
#E91E63
pink lighten-5
#FCE4EC
pink lighten-4
#F8BBD0
pink lighten-3
#F48FB1
pink lighten-2
#F06292
pink lighten-1
#EC407A
pink darken-1
#D81B60
pink darken-2
#C2185B
pink darken-3
#AD1457
pink darken-4
#880E4F
pink accent-1
#FF80AB
pink accent-2
#FF4081
pink accent-3
#F50057
pink accent-4
#C51162

purple

purple 
#9C27B0
purple lighten-5
#F3E5F5
purple lighten-4
#E1BEE7
purple lighten-3
#CE93D8
purple lighten-2
#BA68C8
purple lighten-1
#AB47BC
purple darken-1
#8E24AA
purple darken-2
#7B1FA2
purple darken-3
#6A1B9A
purple darken-4
#4A148C
purple accent-1
#EA80FC
purple accent-2
#E040FB
purple accent-3
#D500F9
purple accent-4
#AA00FF

deep-purple

deep-purple 
#673AB7
deep-purple lighten-5
#EDE7F6
deep-purple lighten-4
#D1C4E9
deep-purple lighten-3
#B39DDB
deep-purple lighten-2
#9575CD
deep-purple lighten-1
#7E57C2
deep-purple darken-1
#5E35B1
deep-purple darken-2
#512DA8
deep-purple darken-3
#4527A0
deep-purple darken-4
#311B92
deep-purple accent-1
#B388FF
deep-purple accent-2
#7C4DFF
deep-purple accent-3
#651FFF
deep-purple accent-4
#6200EA

indigo

indigo 
#3F51B5
indigo lighten-5
#E8EAF6
indigo lighten-4
#C5CAE9
indigo lighten-3
#9FA8DA
indigo lighten-2
#7986CB
indigo lighten-1
#5C6BC0
indigo darken-1
#3949AB
indigo darken-2
#303F9F
indigo darken-3
#283593
indigo darken-4
#1A237E
indigo accent-1
#8C9EFF
indigo accent-2
#536DFE
indigo accent-3
#3D5AFE
indigo accent-4
#304FFE

blue

blue 
#2196F3
blue lighten-5
#E3F2FD
blue lighten-4
#BBDEFB
blue lighten-3
#90CAF9
blue lighten-2
#64B5F6
blue lighten-1
#42A5F5
blue darken-1
#1E88E5
blue darken-2
#1976D2
blue darken-3
#1565C0
blue darken-4
#0D47A1
blue accent-1
#82B1FF
blue accent-2
#448AFF
blue accent-3
#2979FF
blue accent-4
#2962FF

light-blue

light-blue 
#03A9F4
light-blue lighten-5
#E1F5FE
light-blue lighten-4
#B3E5FC
light-blue lighten-3
#81D4FA
light-blue lighten-2
#4FC3F7
light-blue lighten-1
#29B6F6
light-blue darken-1
#039BE5
light-blue darken-2
#0288D1
light-blue darken-3
#0277BD
light-blue darken-4
#01579B
light-blue accent-1
#80D8FF
light-blue accent-2
#40C4FF
light-blue accent-3
#00B0FF
light-blue accent-4
#0091EA

cyan

cyan 
#00BCD4
cyan lighten-5
#E0F7FA
cyan lighten-4
#B2EBF2
cyan lighten-3
#80DEEA
cyan lighten-2
#4DD0E1
cyan lighten-1
#26C6DA
cyan darken-1
#00ACC1
cyan darken-2
#0097A7
cyan darken-3
#00838F
cyan darken-4
#006064
cyan accent-1
#84FFFF
cyan accent-2
#18FFFF
cyan accent-3
#00E5FF
cyan accent-4
#00B8D4

teal

teal 
#009688
teal lighten-5
#E0F2F1
teal lighten-4
#B2DFDB
teal lighten-3
#80CBC4
teal lighten-2
#4DB6AC
teal lighten-1
#26A69A
teal darken-1
#00897B
teal darken-2
#00796B
teal darken-3
#00695C
teal darken-4
#004D40
teal accent-1
#A7FFEB
teal accent-2
#64FFDA
teal accent-3
#1DE9B6
teal accent-4
#00BFA5

green

green 
#4CAF50
green lighten-5
#E8F5E9
green lighten-4
#C8E6C9
green lighten-3
#A5D6A7
green lighten-2
#81C784
green lighten-1
#66BB6A
green darken-1
#43A047
green darken-2
#388E3C
green darken-3
#2E7D32
green darken-4
#1B5E20
green accent-1
#B9F6CA
green accent-2
#69F0AE
green accent-3
#00E676
green accent-4
#00C853

light-green

light-green 
#8BC34A
light-green lighten-5
#F1F8E9
light-green lighten-4
#DCEDC8
light-green lighten-3
#C5E1A5
light-green lighten-2
#AED581
light-green lighten-1
#9CCC65
light-green darken-1
#7CB342
light-green darken-2
#689F38
light-green darken-3
#558B2F
light-green darken-4
#33691E
light-green accent-1
#CCFF90
light-green accent-2
#B2FF59
light-green accent-3
#76FF03
light-green accent-4
#64DD17

lime

lime 
#CDDC39
lime lighten-5
#F9FBE7
lime lighten-4
#F0F4C3
lime lighten-3
#E6EE9C
lime lighten-2
#DCE775
lime lighten-1
#D4E157
lime darken-1
#C0CA33
lime darken-2
#AFB42B
lime darken-3
#9E9D24
lime darken-4
#827717
lime accent-1
#F4FF81
lime accent-2
#EEFF41
lime accent-3
#C6FF00
lime accent-4
#AEEA00

yellow

yellow 
#FFEB3B
yellow lighten-5
#FFFDE7
yellow lighten-4
#FFF9C4
yellow lighten-3
#FFF59D
yellow lighten-2
#FFF176
yellow lighten-1
#FFEE58
yellow darken-1
#FDD835
yellow darken-2
#FBC02D
yellow darken-3
#F9A825
yellow darken-4
#F57F17
yellow accent-1
#FFFF8D
yellow accent-2
#FFFF00
yellow accent-3
#FFEA00
yellow accent-4
#FFD600

amber

amber 
#FFC107
amber lighten-5
#FFF8E1
amber lighten-4
#FFECB3
amber lighten-3
#FFE082
amber lighten-2
#FFD54F
amber lighten-1
#FFCA28
amber darken-1
#FFB300
amber darken-2
#FFA000
amber darken-3
#FF8F00
amber darken-4
#FF6F00
amber accent-1
#FFE57F
amber accent-2
#FFD740
amber accent-3
#FFC400
amber accent-4
#FFAB00

orange

orange 
#FF9800
orange lighten-5
#FFF3E0
orange lighten-4
#FFE0B2
orange lighten-3
#FFCC80
orange lighten-2
#FFB74D
orange lighten-1
#FFA726
orange darken-1
#FB8C00
orange darken-2
#F57C00
orange darken-3
#EF6C00
orange darken-4
#E65100
orange accent-1
#FFD180
orange accent-2
#FFAB40
orange accent-3
#FF9100
orange accent-4
#FF6D00

deep-orange

deep-orange 
#FF5722
deep-orange lighten-5
#FBE9E7
deep-orange lighten-4
#FFCCBC
deep-orange lighten-3
#FFAB91
deep-orange lighten-2
#FF8A65
deep-orange lighten-1
#FF7043
deep-orange darken-1
#F4511E
deep-orange darken-2
#E64A19
deep-orange darken-3
#D84315
deep-orange darken-4
#BF360C
deep-orange accent-1
#FF9E80
deep-orange accent-2
#FF6E40
deep-orange accent-3
#FF3D00
deep-orange accent-4
#DD2C00

brown

brown 
#795548
brown lighten-5
#EFEBE9
brown lighten-4
#D7CCC8
brown lighten-3
#BCAAA4
brown lighten-2
#A1887F
brown lighten-1
#8D6E63
brown darken-1
#6D4C41
brown darken-2
#5D4037
brown darken-3
#4E342E
brown darken-4
#3E2723

blue-grey

blue-grey 
#607D8B
blue-grey lighten-5
#ECEFF1
blue-grey lighten-4
#CFD8DC
blue-grey lighten-3
#B0BEC5
blue-grey lighten-2
#90A4AE
blue-grey lighten-1
#78909C
blue-grey darken-1
#546E7A
blue-grey darken-2
#455A64
blue-grey darken-3
#37474F
blue-grey darken-4
#263238

grey

grey 
#9E9E9E
grey lighten-5
#FAFAFA
grey lighten-4
#F5F5F5
grey lighten-3
#EEEEEE
grey lighten-2
#E0E0E0
grey lighten-1
#BDBDBD
grey darken-1
#757575
grey darken-2
#616161
grey darken-3
#424242
grey darken-4
#212121

shades

black
#000000
white
#FFFFFF
transparent