Vue Vite 애플리케이션에서 다크/라이트 모드 구현

이 기사에서는 라이브러리를 사용하지 않고 Vue Vite 애플리케이션에 다크/라이트 모드 기능을 구현합니다.

간단한 Vite 응용 프로그램을 만든 다음 응용 프로그램에 대한 간단한 사용자 인터페이스를 설정하는 것으로 시작합니다. Vue 애플리케이션을 만들기 전에 WrapPixel의 훌륭한 기능Free Vue Templates에 대해 언급하고 싶습니다. 무료로 다운로드하여 개인 및 상업적 용도로 사용할 수 있습니다. 멋진 사용자 인터페이스를 프로젝트에서 직접 사용할 수 있으므로 엄청난 시간을 절약할 수 있으며, 이는 애플리케이션에 놀라운 모양과 느낌을 줄 것입니다. 그래서 그들을 확인하십시오.

Vuejs Vite 애플리케이션 만들기

Vite 애플리케이션을 설정하려면 터미널을 열고 다음을 입력하십시오.

npm init vite-app themeswitcher

이 명령은 새 vite 애플리케이션을 스캐폴딩합니다. 프로젝트 디렉토리로 이동하여 프로젝트 종속 항목을 설치해야 합니다.

cd themeswitcher
npm install

설치 후 이제 npm run dev 명령을 사용하여 애플리케이션을 실행할 수 있습니다.

code . && npm run dev

code . 명령은 VS Code에서 애플리케이션을 엽니다.

이제 애플리케이션이 포트 3000에서 실행됩니다.



응용 프로그램을 시작하고 실행하면 이제 CSS 자산을 만들 수 있습니다. css/dark.css 디렉토리 내에 public 파일을 생성합니다. 여기에 다크 모드 환경을 위한 모든 CSS 코드를 저장할 것입니다.

dark.css 파일에 다음 코드를 추가합니다.

:root {
    --text: #ffffff;
    --background: #1d1d23;
}
body {
    background-color: var(--background) !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
small,
a {
    color: var(--text) !important;
}

이제 우리가 정의한 모든 스타일이 적용될 수 있도록 우리가 만든 dark.css 파일로 설정할 링크 태그를 html 헤드 내부에 생성하는 메서드를 생성해야 합니다.

이를 위해 Javascript 클래스를 사용할 것입니다. src 디렉토리 내에 src/theme.js 파일을 생성하고 다음 코드를 추가합니다.

export default class themeChanger {
    /**
     * @constructor
     */
    constructor() {}
    _addDarkTheme() {
        const darkThemeLinkEl = document.createElement('link')
        darkThemeLinkEl.setAttribute('rel', 'stylesheet')
        darkThemeLinkEl.setAttribute('href', './css/dark.css')
        darkThemeLinkEl.setAttribute('id', 'dark-theme-style')
        const docHead = document.querySelector('head')
        docHead.append(darkThemeLinkEl)
    }
    _removeDarkTheme() {
        const darkThemeLinkEl = document.querySelector('#dark-theme-style')
        const parentNode = darkThemeLinkEl.parentNode
        parentNode.removeChild(darkThemeLinkEl)
    }
    _darkThemeSwitch() {
        const darkThemeLinkEl = document.querySelector('#dark-theme-style')
        if (!darkThemeLinkEl) {
            this._addDarkTheme()
        } else {
            this._removeDarkTheme()
        }
    }
}

3가지 방법을 만듭니다.

_addDarkTheme() : 이렇게 하면 응용 프로그램의 HTML 헤드에 링크 태그가 추가됩니다.

_removeDarkTheme() : 이렇게 하면 HTML 헤드에 추가된 링크가 제거됩니다.

_darkThemeSwitch() : 이렇게 하면 추가 및 제거 방법을 토글하여 HTML 헤드에서 링크 태그를 추가 및 제거합니다.

계속해서 Vuejs 구성 요소에서 이 메서드를 사용할 수 있습니다.
components/HelloWorld.vue의 코드를 다음과 같이 편집합니다.

<template>
  <h3>Vite is the future of Frontend Developement.</h3>
  <small>Thanks to Evan You</small>
  <br />
  <button @click="darkThemeSwitch">switch</button>
</template>
<script>
import themeChanger from "../util/theme.js";
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      themeChanger: null,
    };
  },
  methods: {
    darkThemeSwitch() {
      this.themeChanger._darkThemeSwitch();
    },
  },
  created() {
    this.themeChanger = new themeChanger();
  },
};
</script>

themeChanger 클래스의 인스턴스를 가져온 다음 Vuejs 데이터 인스턴스에 저장합니다. 그런 다음 _darkThemeSwitch 파일에서 생성한 theme.js를 호출하는 버튼을 생성합니다.

이 작업을 완료하면 이제 애플리케이션에서 밝은 모드와 어두운 모드 사이를 전환할 수 있습니다.



생성 방법에 대한 기사를 확인할 수도 있습니다shopping cart in Vue Vite.