Vuetify에서 사용자 지정 테마를 사용하고 색 변수를 구성 요소에 전달

Vuetify에서 사용자 지정 테마를 사용하고 색 변수를 구성 요소에 전달

나의index.js파일 수동으로 Vuetify를 재정의함theme회사 색상으로 반대:

Vue.use(Vuetify, {
  theme: {
    primary: '#377ef9',
    secondary: '#1b3e70',
    accent: '#ff643d',
    error: '#ff643d'
    ...
  }

이제 내 템플릿에서 다음과 같은 색상을 사용할 수 있다.

<my-text-field name="input text"
    label="text"
    value="text text text text..."
    type="text"
    color="primary">
</my-text-field>

내가 쫓는 건 그 기계를 사용하는 거야primary또는 의 다른 변수theme위에서 정의한 객체, 내 템플릿 스타일 내부:

<script>
  import { VTextField } from 'vuetify'
  export default {
    extends: VTextField
  }
</script>

<style scoped lang="stylus">
  label
    color: <seconday color> <-- this is what I'm after
    color: #1b3e70 <-- this works, but not quite good enough for me
</style>

스타일 섹션에 내 색의 육각값만 쉽게 쓸 수 있지만, 나는 내 자신을 반복하고 싶지 않고 오히려 내 것을 사용하고 싶다.theme그래서 내가 모든 곳에서 쉽게 색을 바꿀 수 있고, 오타를 피해서 색상 정의에 실수를 하는 것을 피할 수 있을 것이다.

편집

버전에서는 CSS 변수를 사용할 수 있으므로
기:IE(Edge가 작동해야 함)에서는 작동하지않을 것으로 추정되며, 일부 사파리 버전에서는 수 있는가 않을 작동하지?

문서로부터(사용자 정의 속성 참조)

customProperties를 활성화하면 각 테마 색상에 대한 css 변수도 생성되며, 이 변수를 구성 요소의 블록에서 사용할 수 있다.

Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})

<style scoped>
  .something {
    color: var(--v-primary-base)
    background-color: var(--v-accent-lighten2)
  }
</style>

사용자 지정 값의 경우(예:
yourcustomvariablename: '#607D8B'
사용하다--v-yourcustomvariablename-base(그러니까)base디폴트(default)이다.

---

---

원본 답변:

라는 것이 있다.Feature Requestgithub에:스타일러스 파일의 테마 색상에 액세스

@KaelWD(데브 중 하나)는 다음과 같이 썼다.

이것은 네가 스스로 실행해야 할 것이다.나도 비슷한 일을 해 본 적이 있지만, 프레임워크 수준에서는 별로 효과가 없어.

문제에 레이블이 지정됨wontfix

---

_{편집(2018/10/11)}
Also see this updated thread:
https://github.com/vuetifyjs/vuetify/issues/827 (Feature request: Native css variables)

이를 활용해서 돌아설 수 있는 방법이 있다.:style특성사용자 지정 CSS 속성을 반응적으로 설정하는 데 사용할 수 있다.

계산된 속성 추가:

computed: {
    cssProps () {
        return {
            '--secondary-color': this.$vuetify.theme.secondary
        }
    }

스타일을 cssProp에 바인딩:

<div id="app" :style="cssProps">

그런 다음, 당신의 스타일로:

<style scoped>
    label
        color: var(--secondary-color);
</style>

이 토론에서 채택된 내용: https://github.com/vuejs/vue/issues/7346

Vuetify V2 이후부터는 이 문제를 해결하기 위해 다음과 같은 작업을 수행하여 SCSS 색상 변수에 액세스할 수 있다.

// Import the Vuetify styles somewhere global
@import '~vuetify/src/styles/styles.sass';

// Now in your components you can access the colour variables using map-get
div {
  background: map-get($grey, lighten-4);
}

모든 색상은 /node_modules/vuetify/스타일/설정/_colors.scss에서 찾을 수 있다.

위의 답변에서 모든 뷰잉 색상을 포함하려면 App.vue 템플릿에 이 코드를 넣으십시오.

<v-app :style="cssProps">

App.vue 스크립트

computed: {
   cssProps () {
      var themeColors = {}
      Object.keys(this.$vuetify.theme.themes.light).forEach((color) => {
        themeColors[`--v-${color}`] = this.$vuetify.theme.themes.light[color]
      })
      return themeColors
   }
}

만약 당신이 vuetify.js에서 이 색깔을 가지고 있다면 말하자.

export default new Vuetify({
  treeShake: true,
    theme: {
      themes: {
        light: {
          darkRed: "#CD3300",
        }
      }
    }
})

그런 다음 모든 구성 요소에서 다음을 수행하십시오.

<style scoped>
  .label {
    color: var(--v-darkRed);
  }
</style>

전환 테마(도움말 링크):

    <v-app :dark="setTheme" 
           :style="{background: $vuetify.theme.themes[theme].background}" 
           >

JS:

      computed: {
            setTheme() {
                this.$vuetify.theme.dark = this.goDark;
            }
      },
      data() {
            return { 
                goDark: false
            }
      }

아마도 내가 늦을지도 몰라. 가장 효율적인 방법은 문서 https://vuetifyjs.com/en/features/theme/#custom-process https://vuetifyjs.com/en/features/theme/#custom-properties

나는 같은 것에 대해 작업적인 예를 제공할 것이다.이 일이 잘 되려면 세 가지 변화만 있으면 된다.

1. 마법과 테마의 색을 나타내는 옵션 언급

export default new Vuetify({
    theme: {
        options: {
            customProperties: true
        },
        themes: {
            light: {
                primary: "#3DCFD3",
                secondary: "#171b34",
                accent: "3D87E4"
            }
        }
    }
});

2. 테마를 적용할 태그에 클래스 이름 언급

<h4 class="blue-header">Yash Oswal</h4>  

3. CSS 테마 적용.

<style lang="scss">

.blue-header {
  color: var(--v-primary-base);
}

</style>

참조URL: https://stackoverflow.com/questions/48280990/using-custom-theming-in-vuetify-and-pass-color-variables-to-components