Dowiedz się o zmiennych CSS i API LocalStorage dzięki temu praktycznemu projektowi Vue.
Implementowanie ciemnych motywów w naszych aplikacjach internetowych przestało być luksusem i stało się koniecznością. Użytkownicy urządzeń chcą teraz przejść z jasnych motywów na ciemne i odwrotnie, zarówno ze względu na preferencje estetyczne, jak i ze względów praktycznych.
Ciemne motywy oferują ciemniejszą paletę kolorów interfejsów użytkownika, dzięki czemu interfejs jest przyjemny dla oczu w warunkach słabego oświetlenia. Ciemne motywy pomagają także oszczędzać baterię na urządzeniach z ekranami OLED lub AMOLED.
Te i inne zalety sprawiają, że rozsądniej jest dać użytkownikom możliwość przejścia na ciemne motywy.
Konfiguracja aplikacji testowej
Aby lepiej zrozumieć, jak dodawać ciemne motywy w Vue, musisz utworzyć prostą aplikację Vue, aby przetestować swój rozwój.
Aby zainicjować nową aplikację Vue, uruchom następujące polecenie na terminalu:
npm init vue@latest
To polecenie zainstaluje najnowszą wersję pliku
utwórz-vue pakiet, pakiet do inicjowania nowych aplikacji Vue. Poprosi Cię również o wybranie określonego zestawu funkcji. Nie musisz wybierać żadnego, ponieważ nie jest to konieczne w ramach tego samouczka.Dodaj następujący szablon do pliku Aplikacja.vue plik w swojej aplikacji źródło informator:
<template>
<div>
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>
<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<buttonclass="toggle-button">Toggle Dark Modebutton>
div>
template>
Powyższy blok kodu opisuje całą aplikację w zwykłym formacie HTML, bez skryptów i bloków stylów. Klasy z powyższego szablonu będziesz używać do celów stylizacyjnych. W miarę wdrażania ciemnego motywu struktura aplikacji ulegnie zmianie.
Stylizowanie aplikacji testowej za pomocą zmiennych CSS
Zmienne CSS lub niestandardowe właściwości CSS, to wartości dynamiczne, które możesz zdefiniować w swoich arkuszach stylów. Zmienne CSS zapewniają doskonałe narzędzia do tworzenia motywów, ponieważ pozwalają definiować i zarządzać wartościami, takimi jak kolory i rozmiary czcionek, w jednym miejscu.
Będziesz używać zmiennych CSS i selektorów pseudoklas CSS, aby dodać motyw trybu zwykłego i ciemnego do swojej aplikacji Vue. w src/aktywa katalog, utwórz plik style.css plik.
Dodaj następujące style do tego pliku style.css:
/* styles.css */
:root {
--background-color: #ffffff; /* White */
--text-color: #333333; /* Dark Gray */
--box-background: #007bff; /* Royal Blue */
--box-text-color: #ffffff; /* White */
--toggle-button: #007bff; /* Royal Blue */
}
[data-theme='true'] {
--background-color: #333333; /* Dark Gray */
--text-color: #ffffff; /* White */
--box-background: #000000; /* Black */
--box-text-color: #ffffff; /* White */
--toggle-button: #000000; /* Black */
}
Deklaracje te zawierają specjalny selektor pseudoklasy (:źródło) i selektor atrybutów ([data-theme='true']). Style zawarte w selektorze głównym są kierowane na najwyższy element nadrzędny. Działa jako domyślny styl strony internetowej.
Selektor motywu danych celuje w elementy HTML z tym atrybutem ustawionym na wartość true. W tym selektorze atrybutów możesz następnie zdefiniować style motywu trybu ciemnego, aby zastąpić domyślny jasny motyw.
Obie deklaracje definiują zmienne CSS przy użyciu metody -- prefiks. Przechowują wartości kolorów, których można następnie użyć do stylizacji aplikacji pod kątem jasnych i ciemnych motywów.
Edytuj src/main.js i zaimportuj plik style.css:
// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')
Teraz dodaj więcej stylów style.css, poniżej motyw danych selektor. Niektóre z tych definicji będą odwoływać się do zmiennych kolorów za pomocą odm słowo kluczowe. Dzięki temu możesz zmienić używane kolory, po prostu zmieniając wartość każdej zmiennej, tak jak robią to początkowe style.
* {
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;
}
Możesz ustawić właściwość przejścia dla wszystkich elementów za pomocą uniwersalnego selektora CSS (*), aby utworzyć płynną animację podczas przełączania trybów:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
Te przejścia powodują stopniową zmianę koloru tła i koloru tekstu po przełączeniu trybu ciemnego, dając przyjemny efekt.
Implementacja logiki trybu ciemnego
Aby zaimplementować tryb ciemnego motywu, będziesz potrzebować logiki JavaScript do przełączania między jasnymi i ciemnymi motywami. W Twoim Aplikacja.vue wklej następujący blok skryptu poniżej zapisanego bloku szablonu API kompozycji Vue :
<scriptsetup>
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>
Powyższy skrypt zawiera całą logikę JavaScript służącą do przełączania między trybami jasnym i ciemnym w aplikacji internetowej. Skrypt zaczyna się od import instrukcja importowania funkcji ref do obsługi danych reaktywnych (danych dynamicznych) w Vue.
Następnie definiuje a pobierzInitialDarkMode funkcja, która pobiera preferencje użytkownika dotyczące trybu ciemnego przeglądarki Lokalny magazyn. Deklaruje, tryb ciemny ref, inicjując go zgodnie z preferencjami użytkownika pobranymi przez funkcję getInitialDarkMode.
The zapiszDarkModePreference Funkcja aktualizuje preferencje użytkownika dotyczące trybu ciemnego w LocalStorage przeglądarki za pomocą pliku setItem metoda. Wreszcie, przełącz tryb ciemny funkcja pozwoli użytkownikom przełączać tryb ciemny i aktualizować wartość LocalStorage przeglądarki dla trybu ciemnego.
Stosowanie motywu trybu ciemnego i testowanie aplikacji
Teraz w bloku szablonu pliku Aplikacja.vue plik, dodaj selektor atrybutu motywu danych do elementu głównego, aby warunkowo zastosować motyw trybu ciemnego w oparciu o logikę:
<template>
<div:data-theme="darkMode">
<h1class="header">Welcome to My Vue Apph1>
<p>This is a simple Vue app with some text and styles.p>
<divclass="styled-box">
<pclass="styled-text">Styled Textp>
div>
<button @click="toggleDarkMode"class="toggle-button">
Toggle Dark Mode
button>
div>
template>
Tutaj wiążesz selektor motywu danych z ref. darkMode. To gwarantuje, że kiedy tryb ciemny to prawda, ciemny motyw zacznie obowiązywać. Odbiornik zdarzeń kliknięcia na przycisku przełącza między trybem jasnym i ciemnym.
Uruchom następującą komendę w terminalu, aby wyświetlić podgląd aplikacji:
npm run dev
Powinieneś zobaczyć taki ekran:
Po kliknięciu przycisku aplikacja powinna przełączać się między jasnymi i ciemnymi motywami:
Dowiedz się, jak integrować inne pakiety w swoich aplikacjach Vue
Zmienne CSS i interfejs API LocalStorage ułatwiają dodanie ciemnego motywu do aplikacji Vue.
Istnieje wiele bibliotek innych firm i wbudowanych dodatków Vue, które umożliwiają dostosowywanie aplikacji internetowych i korzystanie z dodatkowych funkcji.
