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

instagram viewer
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.