Vuetify에서 기본 색상을 사용자 정의하는 방법은 무엇입니까?

Question

<p>제 문제는 어쩌면 단순한 것일 수도 있지만 지금까지 어떤 해결책도 찾지 못했습니다. 내 Nuxt 애플리케이션에서 <strong>Vuetify</strong>를 사용하고 있습니다. 저는 어두운 테마를 사용했습니다. 공식 웹사이트의 테마 구성에 따라 테마의 <strong>기본, 보조 또는 기타 색상을 원하는 색상으로 변경할 수 있습니다. 하지만 <strong>어두운 테마</strong>로 설정하면 기본 텍스트와 배경색이 흰색과 검정색으로 설정되었습니다. 변경할 수 있는 솔루션을 찾을 수 없습니다. 예를 들어 요소의 배경색을 변경하기 위해 <code>class="primary"</code>를 설정할 수 있다는 것을 알고 있습니다. 하지만 텍스트나 배경의 기본 색상을 다음과 같이 설정하고 싶습니다. </p> <p> <pre class="brush:css;toolbar:false;">본체 { 색상: var(--v-info-base); } /* 또는 */ #앱 { 색상: var(--v-info-base); }</pre> </p> <p>내 웹사이트의 색상은 nuxt.config.js 파일에 다음과 같이 정의됩니다. </p> <p> <pre class="brush:js;toolbar:false;">vuetify: { customVariables: ['~/assets/variables.scss'], 주제: { 어두운: 사실, 옵션: { customProperties: true }, 테마: { 어두운: { 주요한: { 기본: "#099b63", darken1: "#04c279" }, 악센트: "#250032", 보조: "#97812F", 정보: { 기본: "#1FFFF1", darken1: "#450b5a", darken2: "#1125c0", darken3: "#40bfa4" }, 경고: colors.amber.base, 오류: colors.deepOrange.accent4, 성공: colors.green.accent3, 앵커: "#1FFFF1" } }, } },</pre> </p> <p>하지만 그건 제게는 효과가 없어요! ! ! </p>

Answer 1

이를 달성하려면 vuetify의 sass 변수를 재정의해야 합니다. 문서에 사용 예가 있습니다

예를 들어 variables.scss에서 다음 코드를 사용할 수 있습니다.

으아아아

이렇게 하면 어두운 모드의 기본 배경 및 텍스트 색상이 재정의됩니다.