Vuetify에서 기본 색상을 사용자 정의하는 방법은 무엇입니까?
<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>
