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

웹 애플리케이션에 어두운 테마를 구현하는 것은 사치에서 필수로 바뀌었습니다. 이제 장치 사용자는 미적 선호도와 실용적인 이유로 밝은 테마에서 어두운 테마로 또는 그 반대로 전환하기를 원합니다.

어두운 테마는 사용자 인터페이스에 더 어두운 색상 팔레트를 제공하여 저조도 환경에서도 인터페이스를 눈에 편하게 만듭니다. 어두운 테마는 OLED 또는 AMOLED 화면이 있는 장치의 배터리 수명을 보존하는 데에도 도움이 됩니다.

이러한 장점과 그 이상으로 인해 사용자에게 어두운 테마로 전환할 수 있는 선택권을 제공하는 것이 더 합리적입니다.

테스트 애플리케이션 설정

Vue에 어두운 테마를 추가하는 방법을 더 잘 이해하려면 개발을 테스트 실행하기 위한 간단한 Vue 앱을 만들어야 합니다.

새 Vue 앱을 초기화하려면 터미널에서 다음 명령을 실행하세요.

 npm init vue@latest

이 명령은 새로운 Vue 앱을 초기화하기 위한 패키지인 create-vue 패키지의 최신 버전을 설치합니다. 또한 특정 기능 세트 중에서 선택하라는 메시지도 표시됩니다. 이 자습서의 범위에 필요하지 않으므로 선택할 필요가 없습니다.

애플리케이션의 src 디렉터리에 있는 App.vue 파일에 다음 템플릿을 추가합니다.

 
<template>
  <div>
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>    <button class="toggle-button">Toggle Dark Mode</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)와 속성 선택자(:root)가 포함되어 있습니다.[data-theme=’true’]). 루트 선택기에 포함된 스타일은 가장 높은 상위 요소를 대상으로 합니다. 웹페이지의 기본 스타일 역할을 합니다.

데이터 테마 선택기는 해당 속성이 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;
}

모드를 전환할 때 부드러운 애니메이션을 만들려면:

이러한 전환은 어두운 모드가 전환될 때 배경색과 텍스트 색상이 점진적으로 변경되어 기분 좋은 효과를 제공합니다.

다크 모드 로직 구현

 
<script setup>
import { ref } from 'vue';// Function to get the initial dark mode preference from local storage
const getInitialDarkMode = () => {
  const userPreference = localStorage.getItem('darkMode');
  return userPreference === 'true' ? true : false;
};
// Define the ref for darkMode and initialize it with the user preference
// or false
const darkMode = ref(getInitialDarkMode());
// Function to save the dark mode preference to local storage
const saveDarkModePreference = (isDarkMode) => {
  localStorage.setItem('darkMode', isDarkMode);
};
// Function to toggle dark mode and update the local storage preference
const toggleDarkMode = () => {
  darkMode.value = !darkMode.value;
  saveDarkModePreference(darkMode.value);
};
</script>

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

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

다음으로 브라우저의 LocalStorage에서 사용자의 어두운 모드 기본 설정을 검색하는 getInitialDarkMode 함수를 정의합니다. darkMode 참조를 선언하고 getInitialDarkMode 함수에 의해 검색된 사용자 기본 설정으로 초기화합니다.

saveDarkModePreference 함수는 setItem 메소드를 사용하여 브라우저의 LocalStorage에서 사용자의 어두운 모드 기본 설정을 업데이트합니다. 마지막으로 토글다크모드(toggleDarkMode) 기능을 사용하면 사용자가 다크 모드를 전환하고 다크 모드에 대한 브라우저의 LocalStorage 값을 업데이트할 수 있습니다.

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

 
<template>
  
       conditionally -->
  <div :data-theme="darkMode"> 
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>     
    <button @click="toggleDarkMode" class="toggle-button">
      Toggle Dark Mode
    </button> 
  </div>
</template>

이제 App.vue 파일의 템플릿 블록에서 데이터 테마 속성 선택기를 루트 요소에 추가하여 논리에 따라 어두운 모드 테마를 조건부로 적용합니다.

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

 npm run dev

애플리케이션을 미리 보려면 터미널에서 다음 명령을 실행하세요.

다음과 같은 화면이 표시됩니다.

버튼을 클릭하면 앱이 밝은 테마와 어두운 테마 사이를 전환해야 합니다.

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

CSS 변수와 LocalStorage API를 사용하면 Vue 앱에 어두운 테마를 쉽게 추가할 수 있습니다.

웹 앱을 사용자 정의하고 추가 기능을 사용할 수 있는 많은 타사 라이브러리와 내장된 Vue 추가 기능이 있습니다.