Wprowadzenie trybów ciemnych do interfejsów aplikacji webowych stało się standardem, a nie tylko opcją dodatkową. Użytkownicy współczesnych urządzeń mobilnych oraz stacjonarnych oczekują możliwości przełączania między motywami jasnymi i ciemnymi, kierując się zarówno względami estetycznymi, jak i praktycznymi.
Tryby ciemne, wykorzystujące ciemniejszą kolorystykę interfejsu, zapewniają większy komfort dla wzroku, szczególnie w warunkach słabego oświetlenia. Co więcej, w przypadku urządzeń z ekranami typu OLED lub AMOLED, używanie ciemnych motywów może przyczynić się do zmniejszenia zużycia energii baterii.
Wymienione korzyści i inne aspekty skłaniają do udostępnienia użytkownikom opcji przełączania na ciemne motywy.
Przygotowanie Aplikacji Testowej
Aby dogłębnie zrozumieć proces dodawania motywów ciemnych w środowisku Vue, konieczne jest stworzenie prostej aplikacji Vue, która posłuży nam jako platforma testowa.
W celu zainicjowania nowej aplikacji Vue, należy uruchomić poniższe polecenie w wierszu poleceń:
npm init vue@latest
To polecenie spowoduje zainstalowanie najnowszej wersji pakietu create-vue, narzędzia do inicjalizacji nowych projektów Vue. System poprosi o wybór pewnych funkcji, ale na potrzeby tego tutoriala nie musimy wybierać żadnej z nich.
Następnie do pliku App.vue, znajdującego się w katalogu src aplikacji, dodajmy następujący szablon:
<template>
<div>
<h1 class="header">Witaj w Mojej Aplikacji Vue</h1>
<p>To jest prosta aplikacja Vue z tekstem i stylami.</p>
<div class="styled-box">
<p class="styled-text">Tekst ze Stylami</p>
</div><button class="toggle-button">Przełącz Tryb Ciemny</button>
</div>
</template>
Powyższy fragment kodu prezentuje kompletną strukturę aplikacji, wykorzystując standardowy format HTML, bez dodatkowych skryptów czy bloków stylów. Klasy zdefiniowane w szablonie będą używane do określania wyglądu poszczególnych elementów. Struktura aplikacji będzie ewoluować wraz z implementacją trybu ciemnego.
Personalizacja Wyglądu Aplikacji Testowej z Wykorzystaniem Zmiennych CSS
Zmienne CSS, znane również jako właściwości niestandardowe CSS, to dynamiczne wartości, które można zdefiniować w arkuszach stylów. Zapewniają one doskonałe narzędzie do tworzenia motywów, umożliwiając definiowanie i zarządzanie takimi parametrami jak kolory i rozmiary fontów w jednym, centralnym miejscu.
W tym samouczku, do dodania motywów jasnego i ciemnego w aplikacji Vue, wykorzystamy zmienne CSS oraz pseudoklasy CSS. W folderze src/assets stwórz plik o nazwie styles.css.
Dodaj do tego pliku, style.css, następujące definicje stylów:
: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;
}
Te deklaracje zawierają selektor pseudoklasy (:root) oraz selektor atrybutów ([data-theme='true']). Style zawarte w selektorze :root są aplikowane do najwyższego elementu nadrzędnego, działając jako domyślne style dla strony internetowej.
Selektor data-theme jest kierowany do elementów HTML, w których ten atrybut ma wartość true. W tym selektorze atrybutów można zdefiniować style motywu ciemnego, które zastąpią domyślny motyw jasny.
Obie te deklaracje definiują zmienne CSS, poprzedzając je znakiem --. Przechowują one wartości kolorów, które będą wykorzystane do stylizacji aplikacji, umożliwiając przełączanie między motywami jasnymi i ciemnymi.
Teraz zmodyfikuj plik src/main.js, importując utworzony plik styles.css:
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
Następnie dodaj więcej stylów w pliku styles.css, poniżej selektora data-theme. Niektóre z tych definicji będą odwoływać się do zdefiniowanych zmiennych za pomocą słowa kluczowego var. W ten sposób można łatwo modyfikować używane kolory, zmieniając jedynie wartość danej zmiennej, co jest realizowane w początkowych stylach.
* {
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;
}
Za pomocą selektora uniwersalnego CSS można ustawić właściwość przejścia dla wszystkich elementów.
* {
transition: background-color 0.3s, color 0.3s;
}
Umożliwia to płynne animacje kolorów tła i tekstu podczas przełączania między motywami.
Implementacja Logiki Trybu Ciemnego
Aby wdrożyć funkcję trybu ciemnego, będziemy potrzebować logiki JavaScript, która umożliwi przełączanie między motywami jasnymi i ciemnymi. W pliku App.vue, pod blokiem szablonu, wklejmy następujący skrypt, korzystając z API Kompozycji Vue:
<script setup>
import { ref } from 'vue';// Funkcja pobierająca preferencje trybu ciemnego z pamięci lokalnej przy uruchomieniu aplikacji.
const getInitialDarkMode = () => {
const userPreference = localStorage.getItem('darkMode');
return userPreference === 'true' ? true : false;
};// Definiowanie zmiennej referencyjnej (ref) dla trybu ciemnego i inicjalizacja z wykorzystaniem preferencji użytkownika, lub false jeśli nie znaleziono w pamięci lokalnej.
const darkMode = ref(getInitialDarkMode());// Funkcja zapisująca preferencje trybu ciemnego w pamięci lokalnej przeglądarki.
const saveDarkModePreference = (isDarkMode) => {
localStorage.setItem('darkMode', isDarkMode);
};// Funkcja przełączająca tryb ciemny i aktualizująca dane w pamięci lokalnej.
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
saveDarkModePreference(darkMode.value);
};
</script>
Powyższy skrypt zawiera kompletną logikę JavaScript, która obsługuje przełączanie między trybami jasnym i ciemnym w aplikacji. Skrypt rozpoczyna się importem funkcji ref, która jest używana do obsługi danych reaktywnych w Vue, czyli danych, które mogą być dynamicznie aktualizowane.
Następnie definiujemy funkcję getInitialDarkMode, która odczytuje preferencje użytkownika dotyczące trybu ciemnego z LocalStorage przeglądarki. Kolejno deklarujemy zmienną referencyjną darkMode, inicjując ją preferencjami pobranymi za pomocą getInitialDarkMode.
Funkcja saveDarkModePreference służy do aktualizacji preferencji trybu ciemnego w pamięci lokalnej przeglądarki przy użyciu metody setItem. Ostatnia funkcja toggleDarkMode umożliwia użytkownikom przełączanie trybu ciemnego oraz aktualizację wartości w LocalStorage.
Implementacja Motywu Ciemnego i Testowanie Aplikacji
<template>
<div :data-theme="darkMode">
<h1 class="header">Witaj w Mojej Aplikacji Vue</h1>
<p>To jest prosta aplikacja Vue z tekstem i stylami.</p>
<div class="styled-box">
<p class="styled-text">Tekst ze Stylami</p>
</div>
<button @click="toggleDarkMode" class="toggle-button">
Przełącz Tryb Ciemny
</button>
</div>
</template>
W bloku szablonu pliku App.vue, dodajmy teraz selektor atrybutu data-theme do głównego elementu div, aby warunkowo aplikować motyw ciemny na podstawie zaimplementowanej logiki:
W tym miejscu, atrybut data-theme jest powiązany z zmienną referencyjną darkMode. Dzięki temu, gdy darkMode ma wartość true, aktywowany zostanie motyw ciemny. Dodatkowo, na przycisku dodano nasłuch na kliknięcie, które przełącza między trybami jasnym i ciemnym.
npm run dev
Aby przetestować aplikację, uruchom w terminalu następującą komendę:
Powinien pojawić się następujący ekran:
Po kliknięciu przycisku, aplikacja powinna przełączać się pomiędzy motywem jasnym i ciemnym:
Odkryj możliwości integracji innych pakietów w aplikacjach Vue
Wykorzystanie zmiennych CSS i API LocalStorage znacznie ułatwia implementację trybu ciemnego w aplikacjach Vue.
Istnieje wiele bibliotek zewnętrznych i wbudowanych narzędzi Vue, które pozwalają na rozbudowę funkcjonalności i dostosowanie aplikacji internetowych.