Vuetify 조건부 다크 테마

Vuetify 조건부 다크 테마

Vuetify를 사용하여 소셜 미디어 웹사이트를 만들고 있습니다.지금 직면한 문제는 다크 애트리뷰트를 사용하여 사용자가 일반 테마와 다크 테마를 전환할 수 있도록 하는 것입니다.문제는 Vue의 조건부 렌더링 방법을 사용할 수 없다는 것입니다. 왜냐하면 다크는 바인딩할 수 있는 속성이 아니기 때문입니다.다크 테마를 적용하기 위해 사용하는 코드 부분은 다음과 같습니다.

<v-app dark>

네.dark또는light속성이 아닙니다.props이 경우 가치를 가질 수 있습니다.true또는false

이것은 vuetify의 문서에서 확인할 수 있습니다.

소품은 하위 구성요소와의 통신에 사용되는 특성입니다.접두사는 다음과 같습니다.:일반적인 특성으로 구별하기 위해서입니다.

해결 방법을 찾고 있습니다.

<v-app :dark="true"> 

또는

<v-app :dark="false"> 

true 또는 false를 비활성 데이터 옵션 또는 계산된 속성으로 대체하여 테마를 프로그래밍 방식으로 변경할 수 있습니다.

로컬 저장소로 테마를 지속할 수 있도록 하려면

안에서.plugins/vuetify.js또는plugins/vuetify.ts추가:

export default new Vuetify({
  theme: {
    //
    dark: localStorage.getItem('theme') === 'dark',
    //
  }
})

다음으로 테마를 전환하는 버튼에 다음 기능을 적용합니다.

switchTheme() {
  this.$vuetify.theme.dark = !this.$vuetify.theme.dark;

  localStorage.setItem('theme', this.$vuetify.theme.dark ? 'dark' : 'light');
}

설명서에 나와 있듯이 변수를 업데이트하기만 하면 됩니다.this.$vuetify.theme.dark:

이를 변경하여 수동으로 어둡게 설정하거나 해제할 수 있습니다.$secetify.teme.dark에서 true 또는 false로 이동합니다.

컴포넌트가 앱으로 사용되는 경우:

<template>
   <v-app :dark="isDark"></v-app>
</template>

<script>
   export default {
      data () {
         return {
            isDark: false,
         }
      },
   }
</script>

앱 인스턴스에서 호출할 수도 있습니다.

인스턴스화된 객체 정의 속성을 통해app.__vue__.isDark = isDark다음과 같이 인스턴스화되었을 때:

const app = new Vue(
    {
        data: () => ({
            isDark: false
        }),
    }
)

다른 컴포넌트에서 호출할 수 있습니다.

언급URL : https://stackoverflow.com/questions/50248301/vuetify-conditional-dark-theme