Aprenda sobre variáveis CSS e a API LocalStorage com este projeto prático do Vue.
A implementação de temas obscuros em nossas aplicações web passou de um luxo a uma necessidade. Os usuários de dispositivos agora desejam mudar de temas claros para temas escuros e vice-versa, tanto por preferências estéticas quanto por razões práticas.
Os temas escuros oferecem uma paleta de cores mais escuras para as interfaces do usuário, tornando a interface agradável aos olhos em ambientes com pouca luz. Os temas escuros também ajudam a economizar bateria em dispositivos com telas OLED ou AMOLED.
Essas vantagens e muito mais tornam mais razoável dar aos usuários a opção de mudar para temas escuros.
Configurando o aplicativo de teste
Para entender melhor como adicionar temas escuros no Vue, você precisará criar um aplicativo Vue simples para testar seu desenvolvimento.
Para inicializar o novo aplicativo Vue, execute o seguinte comando em seu terminal:
npm init vue@latest
Este comando instalará a versão mais recente do
criar-vue package, o pacote para inicializar novos aplicativos Vue. Ele também solicitará que você escolha um conjunto específico de recursos. Você não precisa selecionar nenhum, pois não é necessário para o escopo deste tutorial.Adicione o seguinte modelo ao Aplicativo.vue arquivo no seu aplicativo fonte diretório:
<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>
O bloco de código acima descreve todo o aplicativo em HTML normal, sem script ou blocos de estilo. Você usará as classes do modelo acima para fins de estilo. Conforme você implementa o tema escuro, a estrutura do aplicativo muda.
Estilizando o aplicativo de teste com variáveis CSS
Variáveis CSS ou propriedades personalizadas CSS, são valores dinâmicos que você pode definir em suas folhas de estilo. As variáveis CSS fornecem excelentes ferramentas para temas porque permitem definir e gerenciar valores como cores e tamanhos de fonte em um só lugar.
Você usará variáveis CSS e seletores de pseudoclasse CSS para adicionar um tema de modo regular e escuro para seu aplicativo Vue. No origem/ativos diretório, crie um estilos.css arquivo.
Adicione os seguintes estilos a este arquivo estilos.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 */
}
Essas declarações contêm um seletor especial de pseudoclasse (:raiz) e um seletor de atributos ([tema de dados='true']). Os estilos incluídos em um seletor raiz têm como alvo o elemento pai mais alto. Ele atua como o estilo padrão da página da web.
O seletor de tema de dados tem como alvo elementos HTML com esse atributo definido como verdadeiro. Neste seletor de atributos, você pode definir estilos para o tema do modo escuro, para substituir o tema claro padrão.
Essas declarações definem variáveis CSS usando o -- prefixo. Eles armazenam valores de cores que você pode usar para estilizar o aplicativo para temas claros e escuros.
Edite o src/main.js arquivo e importe o arquivo estilos.css:
// main.js
import'./assets/styles.css'
import { createApp } from'vue'
import App from'./App.vue'
createApp(App).mount('#app')
Agora adicione mais alguns estilos em estilos.css, abaixo de tema de dados seletor. Algumas dessas definições farão referência às variáveis de cor usando o var palavra-chave. Isso permite alterar as cores em uso simplesmente trocando o valor de cada variável, como fazem os estilos iniciais.
* {
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;
}
Você pode definir uma propriedade de transição em todos os elementos usando o seletor CSS universal (*) para criar uma animação suave ao alternar os modos:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
Essas transições criam uma mudança gradual na cor de fundo e na cor do texto quando o modo escuro é alternado, proporcionando um efeito agradável.
Implementando a lógica do modo escuro
Para implementar o modo de tema escuro, você precisará de lógica JavaScript para alternar entre temas claros e escuros. Na tua Aplicativo.vue arquivo, cole o seguinte bloco de script abaixo do bloco de modelo escrito em API de composição do 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>
O script acima inclui toda a lógica JavaScript para alternar entre os modos claro e escuro em seu aplicativo web. O roteiro começa com um importar instrução para importar a função ref para lidar com dados reativos (dados dinâmicos) no Vue.
A seguir, define um getInitialDarkMode função que recupera a preferência do modo escuro do usuário de o navegador Armazenamento local. Ele declara o modo escuro ref, inicializando-o com a preferência do usuário recuperada pela função getInitialDarkMode.
O salvarDarkModePreference função atualiza a preferência do modo escuro do usuário no LocalStorage do navegador com o definirItem método. finalmente, o alternarDarkMode A função permitirá que os usuários alternem o modo escuro e atualizem o valor LocalStorage do navegador para o modo escuro.
Aplicando o tema do modo escuro e testando o aplicativo
Agora, no bloco de modelo do seu Aplicativo.vue arquivo, adicione o seletor de atributo data-theme ao elemento raiz para aplicar condicionalmente o tema do modo escuro com base em sua lógica:
<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>
Aqui, você está vinculando o seletor de tema de dados à referência darkMode. Isto garante que quando modo escuro for verdade, o tema escuro entrará em vigor. O ouvinte de evento de clique no botão alterna entre os modos claro e escuro.
Execute o seguinte comando em seu terminal para visualizar o aplicativo:
npm run dev
Você deverá ver uma tela como esta:
Ao clicar no botão, o aplicativo deve alternar entre temas claros e escuros:
Aprenda a integrar outros pacotes em seus aplicativos Vue
Variáveis CSS e a API LocalStorage facilitam a adição de um tema sombrio ao seu aplicativo Vue.
Existem muitas bibliotecas de terceiros e extras integrados do Vue que permitem personalizar seus aplicativos da web e usar recursos extras.