제 문제는 어쩌면 단순한 것일 수도 있지만 지금까지 어떤 해결책도 찾지 못했습니다. 내 Nuxt 애플리케이션에서 Vuetify를 사용하고 있습니다. 저는 어두운 테마를 사용했습니다. 공식 웹사이트의 테마 구성에 따라 테마의 기본,
보조또는 기타 색상을 원하는 색상으로 변경할 수 있습니다. 하지만 어두운 테마로 설정하면 기본 텍스트와 배경색이 흰색과 검정색으로 설정되었습니다. 변경할 수 있는 솔루션을 찾을 수 없습니다. 예를 들어 요소의 배경색을 변경하기 위해 class="primary"를 설정할 수 있다는 것을 알고 있습니다. 하지만 텍스트나 배경의 기본 색상을 다음과 같이 설정하고 싶습니다.
본체 { 색상: var(--v-info-base); } /* 또는 */ #앱 { 색상: var(--v-info-base); } 내 웹사이트의 색상은 nuxt.config.js 파일에 다음과 같이 정의됩니다.
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" } }, } }, 하지만 그건 제게는 효과가 없어요! ! !
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이를 달성하려면 vuetify의 sass 변수를 재정의해야 합니다.문서에 사용 예가 있습니다
예를 들어
으아아아variables.scss에서 다음 코드를 사용할 수 있습니다.이렇게 하면 어두운 모드의 기본 배경 및 텍스트 색상이 재정의됩니다.