CSS 변수를 사용한 다크 모드 – Vue JS

다크 모드! 다크 모드! 다크 모드! 모두가 원합니다! 그것이 당신이 여기 있는 이유이며 Vue JS에서 당신이 그것을 달성하도록 도울 것입니다. 갑시다!

먼저 CSS에서 custom variables을 설정합니다.
변수는 약간 다른 형식으로 SASS 및 LESS 에서도 사용할 수 있습니다.

기본 테마에 대한 변수는 :root 아래에 배치해야 하며, 다크 모드에 대한 변수는 data-theme 속성 아래에 배치할 수 있습니다. 아래와 같이 data-theme이 "darkMode"로 설정되어 있는지 확인하십시오.

/* main.css */
:root {
    /* Variables for default theme (light-mode) */
    --background-color: white;
    --text-color: black;  
}

[data-theme="darkMode"] {
    /* Variables for dark mode */
    --background-color: black;
    --text-color: white;   
}

var() function을 사용하여 CSS에서 방금 생성한 변수의 값을 삽입할 수 있습니다. 아래의 예를 살펴보십시오.

/* main.css */

.example {
    background-color: var(--background-color);
    color: var(--text-color);
}

이러한 변수를 사용하면 스타일 간에 쉽게 전환할 수 있습니다.

💡 사용자가 사이트 내 어디에서나 테마를 전환할 수 있기를 원하므로 헤더에 테마 토글 요소를 추가하는 것이 좋습니다.

두 테마 사이를 전환하려면 버튼에 의해 트리거되는 Toggle theme이라는 기능을 추가해 보겠습니다.

//in header.vue

 <button  @click="toggleTheme" aria-label="Toggle themes">
    <span>Toggle Theme</span>  
 </button>


data() {
    return {
        theme: '' //When this property is empty, the theme is set to the default theme i.e. light mode.
    };
},

toggleTheme() {
            this.theme = this.theme == 'darkMode' ? '' : 'darkMode'; //toggles theme value
            document.documentElement.setAttribute('data-theme', this.theme); // sets the data-theme attribute
            localStorage.setItem('theme', this.theme); // stores theme value on local storage
}

이제 토글 테마 버튼을 클릭하여 다크 모드를 토글할 수 있습니다.

또한 페이지가 로드될 때 테마를 설정해야 합니다. Mounted Life-Cycle hook 내의 Vue JS에서 이 작업을 수행합니다.

//in header.vue

mounted() {
        let localTheme = localStorage.getItem('theme'); //gets stored theme value if any
        document.documentElement.setAttribute('data-theme', localTheme); // updates the data-theme attribute
},

이제 아래와 같이 Vue's Conditional Rendering을 사용하여 활성 테마를 기반으로 버튼 요소의 내용을 전환할 수 있습니다.

//in header.vue

 <button @click="toggleTheme" aria-label="Toggle themes">
    <span v-if="this.theme == 'darkMode'"> Light</span>
    <span v-else> Dark</span>     
</button>

다음은 함께 작동하는 이전 코드 조각의 전체적인 보기입니다.

//in header.vue

 <button  @click="toggleTheme" aria-label="Toggle themes">
    <span v-if="this.theme == 'darkMode'"> Light</span>
    <span v-else> Dark</span>     
</button>

<script>
export default {
    data() {
        return {
            theme: '' //When this property is empty, the theme is set to the default theme i.e. light mode.
        };
    },

    mounted() {
        let localTheme = localStorage.getItem('theme'); //gets stored theme value if any
        document.documentElement.setAttribute('data-theme', localTheme); // updates the data-theme attribute
    },

    toggleTheme() {
                this.theme = this.theme == 'darkMode' ? '' : 'darkMode'; //toggles theme value
                document.documentElement.setAttribute('data-theme', this.theme); // updates the data-theme attribute
                localStorage.setItem('theme', this.theme); // stores theme value in local storage
    }
}
<script>

이제 우리는 밝은 모드와 어두운 모드 사이를 전환할 수 있으며 사용자가 선호하는 모드는 로컬에 저장됩니다. 꽤 깔끔합니다!