vue, tailwindcss - 다크모드 구현

개요

처음으로 컴포넌트 라이브러리를 사용하지 않고 다크모드를 구현하려니 수많은 난관을 만나게 되었다. 다음에는 이번처럼 헤매지 않기 위해 기록해두려 한다.

---

코드

tailwind.config.js

class="dark:text-white"와 같이 다크모드일 경우 스타일 요소를 지정하기 위한 설정

module.exports = {
    purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    variants: {
        extend: {},
    },
    plugins: [],
    darkMode: 'selector', // 3.4.1 버전 이후일 경우
    darkMode: 'class', // 3.4.1 버전 이전일 경우
}

base.css

/* 다크모드일 경우 적용되는 사용자 정의 속성*/
html.dark {
    --color-background: black;
    --color-text: white;
}

body {
    min-height: 100vh;
    color: var(--color-text);
    background: var(--color-background);
    transition:
        color 0.5s,
        background-color 0.5s;
}

App.vue

<template>
    <div id="app">
        <span @click="toggleDarkMode" class="fixed top-3 right-3 w-7 h-7 cursor-pointer">
            <div v-if="isDarkMode">
                <!-- 달 아이콘 -->
                <svg className="bg-black" fill="white" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
                </svg>
            </div>
            <div v-else>
                <!-- 해 아이콘 -->
                <svg className="bg-white" fill="black" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z">
                    </path>
                </svg>
            </div>
        </span>
    </div>
</template>

<script>
export default {
    name: 'App',
    data() {
        return {
            isDarkMode: false,  // 다크 모드 상태

        };
    },
    methods: {
        // 다크 모드 상태 설정, 로컬 스토리지에 저장 메서드
        setDarkMode(isDark) {
            this.isDarkMode = isDark;
            document.documentElement.classList.toggle('dark', isDark); // 다크 모드 CSS 클래스 토글
            localStorage.setItem('darkMode', isDark.toString()); // 다크 모드 상태를 로컬 스토리지에 저장
        },
        // 테마 상태 체크 메서드
        checkTheme() {
            const savedDarkMode = localStorage.getItem('darkMode'); // 로컬 스토리지에서 다크 모드 상태를 읽음
            if (savedDarkMode !== null) {
                // 로컬 스토리지에 저장된 상태가 있으면 그 상태를 사용
                this.setDarkMode(savedDarkMode === 'true');
            } else {
                // 저장된 상태가 없으면 OS 기본 테마를 확인
                const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
                this.setDarkMode(prefersDarkMode);
            }
        },
        // 다크 모드 상태 토글 메서드
        toggleDarkMode() {
            this.setDarkMode(!this.isDarkMode); // 현재 상태의 반대값으로 설정
        },
    },
    mounted() {
        this.checkTheme(); // 페이지 로드 시 다크 모드 상태 확인
    },
};
</script>