CSS 변수를 사용하여 Vue 앱에 어두운 테마를 추가하는 방법

웹 애플리케이션에서 어두운 테마를 구현하는 것은 더 이상 단순한 선택 사항이 아닌 필수적인 요소로 자리 잡았습니다. 사용자들은 이제 개인적인 선호나 실용적인 이유에 따라 밝은 테마와 어두운 테마를 자유롭게 전환하고 싶어합니다.

어두운 테마는 사용자 인터페이스에 어두운 색상 팔레트를 적용하여 낮은 조도 환경에서도 편안하게 사용할 수 있도록 합니다. 특히 OLED나 AMOLED 화면을 사용하는 장치에서는 배터리 수명을 늘리는 데에도 효과적입니다.

이러한 장점들을 고려할 때, 사용자에게 어두운 테마를 선택할 수 있는 옵션을 제공하는 것은 매우 합리적입니다.

테스트 애플리케이션 준비

Vue에서 어두운 테마를 추가하는 과정을 좀 더 명확하게 이해하기 위해, 간단한 Vue 앱을 만들어서 실제 개발을 테스트해 보겠습니다.

새로운 Vue 앱을 시작하려면 터미널에서 다음 명령어를 실행하세요.

 npm init vue@latest

이 명령어는 Vue 앱을 생성하는 데 필요한 'create-vue' 패키지의 최신 버전을 설치합니다. 추가적으로 몇 가지 기능을 선택하라는 메시지가 나타날 수 있지만, 이 튜토리얼에서는 특별히 선택할 필요가 없습니다.

이제 애플리케이션의 'src' 디렉토리 안에 있는 'App.vue' 파일을 열고 다음 템플릿 코드를 추가하세요.

 
<template>
  <div>
    <h1 class="header">나의 Vue 앱에 오신 것을 환영합니다</h1>
    <p>이것은 간단한 텍스트와 스타일을 가진 Vue 앱입니다.</p>
    
    <div class="styled-box">
      <p class="styled-text">스타일이 적용된 텍스트</p>
    </div>    <button class="toggle-button">다크 모드 전환</button>
  </div>
</template>

위에 제시된 코드는 스크립트나 스타일 블록 없이 순수한 HTML로 전체 애플리케이션의 구조를 보여줍니다. 우리는 이 템플릿에서 사용된 클래스들을 사용하여 스타일을 적용할 것입니다. 어두운 테마를 구현하는 과정에서 앱의 구조는 변하지 않습니다.

CSS 변수를 이용한 테스트 애플리케이션 스타일링

CSS 변수, 또는 CSS 사용자 정의 속성은 스타일 시트 안에서 정의할 수 있는 동적인 값입니다. CSS 변수를 사용하면 색상이나 글꼴 크기와 같은 값들을 한 곳에서 정의하고 관리할 수 있어서, 테마를 설정하는 데 매우 유용합니다.

CSS 변수와 CSS 의사 클래스 선택자를 활용하여 Vue 애플리케이션에 일반 모드와 어두운 모드 테마를 추가해 보겠습니다. 먼저 'src/assets' 디렉토리 안에 'styles.css'라는 파일을 만드세요.

그리고 'styles.css' 파일에 다음 스타일을 추가하세요.

 
:root {
  --background-color: #ffffff; 
  --text-color: #333333; 
  --box-background: #007bff; 
  --box-text-color: #ffffff; 
  --toggle-button: #007bff; 
}
  
[data-theme="true"] {
  --background-color: #333333; 
  --text-color: #ffffff; 
  --box-background: #000000; 
  --box-text-color: #ffffff; 
  --toggle-button: #000000; 
}

이 선언에는 특수한 의사 클래스 선택자(:root)와 속성 선택자([data-theme='true'])가 포함되어 있습니다. :root 선택자는 가장 상위 요소, 즉 웹 페이지 전체를 대상으로 하며, 기본 스타일을 정의하는 역할을 합니다.

'data-theme' 속성이 'true'로 설정된 HTML 요소를 대상으로 하는 속성 선택자를 사용하여, 기본 밝은 테마를 덮어쓰고 어두운 모드 테마를 정의할 수 있습니다.

이러한 선언들은 모두 ‘--’ 접두사를 사용하여 CSS 변수를 정의합니다. 이러한 변수들은 밝은 테마와 어두운 테마에 맞춰 애플리케이션의 스타일을 지정하는 데 사용될 색상 값을 저장합니다.

이제 'src/main.js' 파일을 편집하여 'styles.css' 파일을 가져오세요.

 
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

다음으로, 'styles.css' 파일의 데이터 테마 선택자 아래에 추가 스타일을 정의해 보세요. 일부 정의에서는 'var' 키워드를 사용하여 색상 변수를 참조합니다. 이렇게 하면 각 변수의 값을 전환하여, 초기 스타일에서처럼 현재 사용 중인 색상을 쉽게 변경할 수 있습니다.

 * {
    background-color: var(--background-color);
    text-align: center;
    color: var(--text-color);
    padding: 20px;
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}
  
.header {
    font-size: 24px;
    margin-bottom: 20px;
}
  
.styled-box {
    background-color: var(--box-background);
    color: var(--box-text-color);
    padding: 10px;
    border-radius: 5px;
    margin: 20px 0;
}
  
.styled-text {
    font-size: 18px;
    font-weight: bold;
}
  
.toggle-button {
    background-color: var(--toggle-button);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 10px;
}

범용 CSS 선택자를 사용하여 모든 요소에 전환 속성을 설정할 수 있습니다.

 * {
  
  transition: background-color 0.3s, color 0.3s;
}

이 설정을 통해 모드를 전환할 때 배경색과 텍스트 색상이 부드럽게 바뀌는 애니메이션 효과를 얻을 수 있습니다.

다크 모드 로직 구현

어두운 테마 모드를 구현하려면, 밝은 테마와 어두운 테마 사이를 전환하는 JavaScript 로직이 필요합니다. 'App.vue' 파일에서 Vue Composition API를 사용하여 작성된 템플릿 블록 아래에 다음 스크립트 블록을 추가하세요.

 
<script setup>
import { ref } from 'vue';// 로컬 스토리지에서 초기 다크 모드 설정을 가져오는 함수
const getInitialDarkMode = () => {
  const userPreference = localStorage.getItem('darkMode');
  return userPreference === 'true' ? true : false;
};
// 다크 모드 설정을 위한 ref를 정의하고 사용자 설정 또는 false로 초기화
const darkMode = ref(getInitialDarkMode());
// 로컬 스토리지에 다크 모드 설정을 저장하는 함수
const saveDarkModePreference = (isDarkMode) => {
  localStorage.setItem('darkMode', isDarkMode);
};
// 다크 모드를 전환하고 로컬 스토리지 설정을 업데이트하는 함수
const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  saveDarkModePreference(darkMode.value);
};
</script>

위에 제시된 스크립트에는 웹 앱의 밝은 모드와 어두운 모드 사이를 전환하는 데 필요한 모든 JavaScript 로직이 포함되어 있습니다. 이 스크립트는 Vue에서 반응형 데이터(동적 데이터)를 처리하기 위한 'ref' 함수를 가져오는 import 문으로 시작됩니다.

다음으로, 브라우저의 로컬 스토리지에서 사용자의 어두운 모드 설정을 가져오는 'getInitialDarkMode' 함수를 정의합니다. 그리고 'darkMode' ref를 선언하고, 'getInitialDarkMode' 함수에서 가져온 사용자 설정으로 초기화합니다.

다크 모드 테마 적용 및 애플리케이션 테스트

'saveDarkModePreference' 함수는 'setItem' 메서드를 사용하여 브라우저의 로컬 스토리지에 사용자의 다크 모드 설정을 업데이트합니다. 마지막으로, 'toggleDarkMode' 함수를 사용하면 사용자가 다크 모드를 전환하고, 브라우저 로컬 스토리지의 다크 모드 값을 변경할 수 있습니다.

 
<template>
  
      
  <div :data-theme="darkMode"> 
    <h1 class="header">나의 Vue 앱에 오신 것을 환영합니다</h1>
    <p>이것은 간단한 텍스트와 스타일을 가진 Vue 앱입니다.</p>
    
    <div class="styled-box">
      <p class="styled-text">스타일이 적용된 텍스트</p>
    </div>   
    <button @click="toggleDarkMode" class="toggle-button">
      다크 모드 전환
    </button> 
  </div>
</template>

이제 'App.vue' 파일의 템플릿 블록에서 'data-theme' 속성 선택자를 최상위 요소에 추가하여, 로직에 따라 어두운 모드 테마를 조건부로 적용합니다.

여기서 'data-theme' 선택자를 'darkMode' ref에 바인딩합니다. 이렇게 하면 'darkMode'가 'true'일 때 어두운 테마가 적용됩니다. 버튼의 클릭 이벤트 리스너는 밝은 모드와 어두운 모드를 전환합니다.

 npm run dev

이제 애플리케이션을 실행하여 확인해 보세요. 터미널에서 위 명령어를 실행하면 됩니다.

화면에 다음과 같은 내용이 표시될 것입니다.

Vue 애플리케이션에 다른 패키지를 통합하는 방법 알아보기

버튼을 누르면 앱이 밝은 테마와 어두운 테마 사이를 전환하는 것을 볼 수 있습니다.

CSS 변수와 로컬 스토리지 API를 사용하면 Vue 앱에 어두운 테마를 간편하게 추가할 수 있습니다.

웹 애플리케이션을 더욱 풍부하게 만들고 추가 기능을 구현하는 데 도움이 되는 다양한 타사 라이브러리와 내장된 Vue 추가 기능들이 존재합니다.