테마 (Theme)

프로그래밍 방식으로 어플리케이션의 색상을 쉽게 변경할 수 있습니다. 기본 스타일 시트를 다시 빌드하고 필요에 따라 프레임웤의 다양한 설정을 커스터마이즈 하세요. 테마 생성기 를 원하시면 여기를 방문하세요.

Theme generator

Discover and generate new color themes for your Vuetify applications using our Theme Generator tool.

밝게, 어둡게 (Light and Dark)

Vuetify 는 메테리얼 디자인 스팩의 라이트(light) 와 다크(dark) 변화를 모두 지원합니다. 이 설정은 루트(root) 어플리케이션 컴포넌트 v-app부터 대부분의 주요 컴포넌트들을 지원합니다. 기본 설정은 라이트 테마이며 dark 프롭(prop)을 추가해서 바꿀 수 있습니다.

<v-app dark>
...
</v-app>

컴포넌트에 라이트나 다크를 적용할때, 이는 모든 자식 컴포넌트에게 상속되고 다른 설정이 없는한 같은 값이 적용됩니다. CSS의 특성으로 인해, 하위 계층의 자식 컴포넌트에 테마 를 추가로 설정해야 할 수도 있습니다. 이는 dark 테마를 사용할 때 가장 많이 발생합니다.

커스터마이징

기본적으로 표준 테마(standard theme)가 모든 컴포넌트에 적용됩니다.

{
  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107'
}

이는 쉽게 변경될 수 있습니다. 간단히 theme 속성(property)으로 Vue.use 함수를 사용하세요. 또한 기본 테마의 속성을 상속하면서 동시에 모든 혹은 일부 테마 속성을 골라서 변경할 수 있습니다.

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

또한 미리 정의된 메테리얼 색상표를 사용할 수 있습니다.

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

Vue.use(Vuetify, {
  theme: {
    primary: colors.purple,
    secondary: colors.grey.darken1,
    accent: colors.shades.black,
    error: colors.red.accent3
  }
})

내부적으로, Vuetify는 이 값들을 기반으로 DOM에서 사용될 수 있는 css 클래스들을 생성합니다. 이 클래스들은 예를 들어 primary or secondary--text 같은 다른 헬퍼 클래스들과 같은 형식으로 쓰입니다.

또한 이 값들은 $vuetify 인스턴스의 theme 속성아래 오브젝트로 설정할 수 있습니다. 이는 테마를 동적으로 바꾸는 것을 가능하게 합니다. 내부적으로는 Vuetifys는 테마 클래스들을 재생성하고 어플리케이션이 중단 없이 업데이트 되도록 클래스를 업데이트 합니다.

this.$vuetify.theme.primary = '#4caf50'

Custom theme variants

While Vuetify automatically generates lighten and darken variants for theme colors, you may want to control this yourself. Simply pass a theme object that contains the variants that you wish to modify. Anything not provided will still be generated for you.

// src/theme.js
import colors from 'vuetify/es5/util/colors'

export default {
  primary: {
    base: colors.purple.base,
    darken1: colors.purple.darken2
  },
  secondary: colors.indigo,
  // All keys will generate theme styles,
  // Here we add a custom `tertiary` color
  tertiary: colors.pink.base
}

You can now import your custom theme object and apply it to Vuetify

// src/index.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import theme from './theme'

Vue.use(Vuetify, { theme })

Below is a full list of the overwritable keys on the theme object:

interface ParsedThemeItem {
  base: string
  lighten5: string
  lighten4: string
  lighten3: string
  lighten2: string
  lighten1: string
  darken1: string
  darken2: string
  darken3: string
  darken4: string

  [name: string]: string
}

옵션 (Options)

Vuetify generates theme styles at run-time for SPA's and server side for SSR applications. The generated styles will be placed in a <style> tag with the id of vuetify-theme-stylesheet.

Minification

For SSR applications, you can pass a callback function to $vuetify.options.minifyTheme to reduce the initial page size. When using this option, it is recommended to also use themeCache.

Vue.use(Vuetify, {
  options: {
    minifyTheme: function (css) {
      return process.env.NODE_ENV === 'production'
        ? css.replace(/[\s|\r\n|\r|\n]/g, '')
        : css
    }
  }
})

Caching

A custom caching object and be provided (works in tandem with minifyTheme) to increase SSR efficiency. The object must contain a get and a set method. Below is an example using LRU cache.

const themeCache = new LRU({
  max: 10,
  maxAge: 1000 * 60 * 60 // 1 hour
})

Vue.use(Vuetify, {
  options: {
    themeCache
  }
})

Custom Properties

Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components' <style> blocks.

// src/plugins/vuetify.js

Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})
<style scoped>
  .something {
    color: var(--v-primary-base)
    background-color: var(--v-accent-lighten2)
  }
</style>

CSP Nonce

Pages with the script-src CSP rule enabled may require a nonce to be specified for embedded style tags. 

Content-Security-Policy: script-src 'self' 'nonce-dQw4w9WgXcQ'
// src/plugins/vuetify.js

Vue.use(Vuetify, {
  options: {
    cspNonce: 'dQw4w9WgXcQ'
  }
})

스타일러스 변수 변경하기

Vuetify는 스타일러스 (stylus) 를 기반으로 만들어졌습니다. scss 와 비슷하게, 당신은 변수를 바꾸고 스타일 파일들을 다시 컴파일할 수 있습니다. 가능한 변수 목록은 여기에 있습니다. 스타일러스(stylus) 파일을 빌드하려면, 어플리케이션이 스타일러스를 지원하도록 설정해야 합니다. 이미 빠른 시작 (Quick Start) 가이드에서 제공하는 Vue-CLI 템플릿을 사용하고 있다면, 이 섹션을 건너뛰어도 좋습니다.

웹펙(Webpack)을 위한 stylus-loader 설정

명령줄(command line)에서 다음 내용을 실행하세요

$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev

이 명령은 스타일러스 파일들을 임포트(import) 하고 분석(parse) 하기 위해 필요한 의존(dependencies)을 설치합니다. 설치가 끝나면 웹팩(webpack) 설정파일(config)를 열어서 스타일러스를 위한 규칙(rule)들을 추가하세요. SSR 기반 어플리케이션의 경우, import가 메인 client-entry 안에 있는 것을 확인하세요(ensure that the import is in your main client-entry).

module: {
  rules: [
    {
      test: /\.styl$/,
      loader: ['style-loader', 'css-loader', 'stylus-loader']
    }
  ]
}

src 디렉토리(혹은 적절한 assets 디렉토리) 안에 stylus 폴더를 만들고 main.styl 파일을 만드세요. 이 파일은 Vuetify 기본 스타일을 import 하고 리빌드하는 엔트리 포인트의 역할을 합니다. 디렉토리와 파일을 만들고 나면 .styl 파일을 열어서 다음 엔트리를 추가합니다.

// main.styl
@import '~vuetify/src/stylus/main' // Ensure you are using stylus-loader

node_modules의 상대적인 위치가 프로젝트에 따라 다를 수 있으니 적절히 설정해야 합니다. 메인 어플리케이션의 index.js 이나 client-entry.js 에서 import 하는 것을 권장합니다. 절대로 main.styl을 컴포넌트 내에서 import 하지 마세요. 이는 성능을 떨어뜨리고 HMR (hot module reloading)을 많이 느리게 만들 수 있습니다.

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader

import 위치를 결정했고, 아직 index 파일에 Vuetify 스타일시트가 <link> 태그로 남아있다면, 지워버리세요. 이제 빌드 프로세스를 재시작 하고 프로젝트를 다시 열면 모든 스타일이 제대로 작동하고 있는 걸 보실 수 있습니다.

값 변경하기 (Changing values)

이제 스타일러스가 설정되었으니 스타일러스의 변수의 기본값을 원하는 대로 바꿀 수 있습니다. 이는 반드시 import 하기 전에 선언되어야 하고, 자동으로 Vuetify 의 기본 값들을 대체합니다 (override).

$body-font-family = 'Open Sans'
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'
// For a-la-carte
@import '~vuetify/src/stylus/app'
Edit this page | language on Github
 — Contribution Guide
Vuetify 1 has reached EOL and is no longer actively maintained. Upgrade to Vuetify 2.