Vuetify로 다크 모드 스위치 만들기

이 튜토리얼에서는 Vuetify 을 사용하여 다크 모드 토글을 만드는 방법을 보여줍니다. 이 튜토리얼에서는 Vuetify가 포함된 Vue2 앱이 이미 있다고 가정합니다. 이 기사를 작성하는 시점에서 Vuetify는 Vue3를 완전히 지원하지 않습니다.
복제할 작업 복사본이 필요한 경우 여기에 첨부된GitHub repository이 있습니다.

1단계: vuetify.js 수정

vuetify.js는 Vue 애플리케이션에 Vuetify를 처음 추가할 때 생성되는 파일입니다. 여기에서 찾을 수 있습니다: src/plugins/vuetify.js . 아래에서 수정하겠습니다.

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import colors from 'vuetify/lib/util/colors'
Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.green.accent3,
        secondary: colors.deepOrange.lighten1
      },
      dark: {
        primary: '#90CAF9',
        secondary: '#E91E63'
      },
    },
  },
});

이 색상을 원하는 대로 설정할 수 있습니다. 귀하의 primary에 대한 light theme 색상이 있고 귀하의 dark theme에도 색상이 있는지 확인하십시오.

Vuetify에 내장된 색상을 사용하려면 3행에서 색상 라이브러리를 가져와야 합니다. 항상 대신 16진수를 사용할 수 있지만 따옴표로 묶어야 합니다(예를 들어 어두운 테마에서 수행했습니다). .

2단계: 토글 추가

documentation on vuetify switches은 v-model를 사용하여 데이터를 바인딩합니다. 우리는 그 v-model를 데이터 객체에서 데이터를 읽는 :value=""와 메서드를 트리거하는 @change=""로 나누기를 원합니다. 이 설정을 사용하면 스위치가 수행할 작업을 보다 유연하게 수행할 수 있습니다.toggleDarkMode() 내부에서 Vuetify 테마를 전환하려고 합니다. this.$vuetify.theme 를 사용하여 Vuetify 테마에 액세스할 수 있습니다. 여기에 대한 설명서는 this.$vuetify.theme 입니다.

<template>
  <v-app>
    <v-app-bar app color="primary">Dark Mode Toggle</v-app-bar>

    <v-main>
      <v-container>
        <v-switch 
          :value="darkMode" 
          @change="toggleDarkMode" 
          :label="`toggle ${switchLabel} mode`"
        ></v-switch>
        <v-col class="primary">I am a primary card</v-col>
        <v-col class="secondary">I am a secondary card</v-col>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({ 
      darkMode: false
    }),
    methods: {
      toggleDarkMode: function () {
        this.$vuetify.theme.dark = !this.$vuetify.theme.dark;
        this.darkMode = !this.darkMode;
      }
    },
    computed: {
      switchLabel: function () {
        return this.darkMode ? 'light' : 'dark';
      }
    }
};
</script>

당신은 그것을 가지고 있습니다! 밝은 테마와 어두운 테마를 전환하는 스위치!

Vuetify는 살아있고 변화하는 UI 라이브러리입니다. 이 기사의 세부 사항은 시간이 지남에 따라 변경될 수 있습니다. 오래된 것이 발견되면 언제든지 저에게 연락하십시오. 행복한 디자인!