A inclusão de temas escuros em aplicações web deixou de ser um mero detalhe estético para se tornar uma necessidade. Usuários de diversos dispositivos agora esperam a opção de alternar entre temas claros e escuros, seja por preferências visuais ou por questões de usabilidade e conforto.
Temas escuros oferecem uma paleta de cores mais sóbria, o que torna a interface mais agradável em ambientes com pouca luz. Adicionalmente, esses temas podem contribuir para a economia de bateria em dispositivos que possuem telas OLED ou AMOLED.
Essas e outras vantagens tornam imprescindível oferecer aos usuários a possibilidade de mudar para um tema escuro.
Preparando o Ambiente de Teste
Para melhor compreender como implementar temas escuros com Vue, é crucial criar uma aplicação Vue simples que sirva como campo de testes.
Para iniciar uma nova aplicação Vue, execute o seguinte comando no seu terminal:
npm init vue@latest
Este comando fará a instalação da versão mais recente do pacote create-vue, a ferramenta para criar novos projetos Vue. Você será solicitado a escolher um conjunto específico de funcionalidades; não é necessário selecionar nenhuma, pois não são indispensáveis para este guia.
Adicione o seguinte modelo ao arquivo App.vue, que está localizado na pasta src do seu projeto:
<template>
<div>
<h1 class="header">Bem-vindo à Minha Aplicação Vue</h1>
<p>Esta é uma aplicação Vue simples com algum texto e estilos.</p>
<div class="styled-box">
<p class="styled-text">Texto Estilizado</p>
</div><button class="toggle-button">Alternar Modo Escuro</button>
</div>
</template>
O bloco de código apresentado descreve a estrutura básica da aplicação utilizando HTML padrão, sem a inclusão de blocos de script ou estilo. As classes definidas no modelo serão utilizadas para aplicar estilos. À medida que o tema escuro for implementado, a estrutura da aplicação se manterá.
Estilizando a Aplicação com Variáveis CSS
Variáveis CSS, ou propriedades personalizadas do CSS, são valores dinâmicos que podem ser definidos nas folhas de estilo. Estas variáveis são ferramentas muito úteis para temas, pois permitem definir e gerenciar valores como cores e tamanhos de fonte em um local centralizado.
Serão utilizadas variáveis CSS e seletores de pseudoclasses CSS para adicionar temas regulares e escuros à sua aplicação Vue. Na pasta src/assets, crie um arquivo chamado estilos.css.
Adicione os seguintes estilos a este arquivo estilos.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;
}
As declarações acima incluem um seletor de pseudoclasse especial (:root) e um seletor de atributos ([data-theme=’true’]). Os estilos definidos no seletor raiz se aplicam ao elemento pai mais alto, funcionando como o estilo padrão da página web.
O seletor data-theme tem como alvo elementos HTML que possuem esse atributo definido como verdadeiro. Dentro deste seletor de atributos, é possível definir estilos específicos para o tema do modo escuro, sobrepondo-se ao tema claro padrão.
Ambas as declarações definem variáveis CSS utilizando o prefixo –. Estas variáveis armazenam valores de cores que serão utilizadas para estilizar a aplicação tanto no tema claro quanto no escuro.
Edite o arquivo src/main.js e importe o arquivo estilos.css:
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
Agora, adicione mais estilos em estilos.css, abaixo do seletor data-theme. Algumas dessas definições farão referência às variáveis de cor utilizando a palavra-chave var. Isso possibilita alterar as cores em uso simplesmente trocando o valor de cada variável, como realizado nos 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;
}
É possível adicionar uma propriedade de transição em todos os elementos utilizando o seletor CSS universal:
* {
transition: background-color 0.3s, color 0.3s;
}
Esta transição cria uma mudança gradual na cor de fundo e cor do texto quando o modo escuro é alternado, gerando um efeito visual suave.
Implementando a Lógica do Modo Escuro
<script setup>
import { ref } from 'vue';// Função para obter a preferência inicial do modo escuro do armazenamento local
const getInitialDarkMode = () => {
const userPreference = localStorage.getItem('darkMode');
return userPreference === 'true' ? true : false;
};// Define a ref para darkMode e a inicializa com a preferência do usuário
// ou false
const darkMode = ref(getInitialDarkMode());// Função para salvar a preferência do modo escuro no armazenamento local
const saveDarkModePreference = (isDarkMode) => {
localStorage.setItem('darkMode', isDarkMode);
};// Função para alternar o modo escuro e atualizar a preferência no armazenamento local
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
saveDarkModePreference(darkMode.value);
};
</script>
Para implementar o modo escuro, será necessário utilizar lógica JavaScript para alternar entre os temas claro e escuro. No arquivo App.vue, insira o bloco de script abaixo do bloco de modelo, utilizando a Composition API do Vue.
O script acima contém toda a lógica JavaScript necessária para alternar entre os modos claro e escuro na aplicação web. Ele inicia com uma instrução import para importar a função ref, utilizada para manipular dados reativos (dados dinâmicos) no Vue.
Em seguida, define-se uma função getInitialDarkMode, que recupera a preferência do modo escuro do usuário armazenada no LocalStorage do navegador. A referência darkMode é declarada e inicializada com a preferência do usuário obtida pela função getInitialDarkMode.
A função saveDarkModePreference atualiza a preferência do modo escuro do usuário no LocalStorage do navegador, utilizando o método setItem. Por fim, a função toggleDarkMode permitirá que os usuários alternem o modo escuro e atualizem o valor correspondente no LocalStorage do navegador.
Aplicando o Tema do Modo Escuro e Testando a Aplicação
<template>
<!-- conditionally -->
<div :data-theme="darkMode">
<h1 class="header">Bem-vindo à Minha Aplicação Vue</h1>
<p>Esta é uma aplicação Vue simples com algum texto e estilos.</p>
<div class="styled-box">
<p class="styled-text">Texto Estilizado</p>
</div>
<button @click="toggleDarkMode" class="toggle-button">
Alternar Modo Escuro
</button>
</div>
</template>
Agora, no bloco de template do arquivo App.vue, adicione o seletor de atributo data-theme ao elemento raiz para aplicar condicionalmente o tema do modo escuro, com base na lógica implementada:
Neste caso, o seletor de tema de dados está sendo vinculado à referência darkMode. Isso garante que, quando darkMode for verdadeiro, o tema escuro será aplicado. O ouvinte de evento de clique no botão alterna entre os modos claro e escuro.
npm run dev
Execute o seguinte comando no terminal para visualizar a aplicação:
Você deverá visualizar uma tela como esta:
Ao clicar no botão, a aplicação deve alternar entre os temas claro e escuro.
Aprenda a integrar outros pacotes em suas aplicações Vue
As variáveis CSS e a API LocalStorage facilitam a inclusão de um tema escuro em sua aplicação Vue.
Existem inúmeras bibliotecas de terceiros e funcionalidades nativas do Vue que permitem personalizar suas aplicações web e adicionar recursos extras.