Como adicionar temas escuros em aplicativos Vue com variáveis ​​CSS

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 pacote create-vue, 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 arquivo App.vue no diretório src do seu aplicativo:

 
<template>
  <div>
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
    <button class="toggle-button">Toggle Dark Mode</button>
  </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 diretório src/assets, crie um arquivo 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; 
}

Essas declarações contêm um seletor de pseudoclasse especial (:root) e um seletor de atributos ([data-theme=’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.

Ambas as 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 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 alguns estilos em estilos.css, abaixo do seletor de tema de dados. Algumas dessas definições farão referência às variáveis ​​de cor usando a palavra-chave var. 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

 * {
  
  transition: background-color 0.3s, color 0.3s;
}

para criar uma animação suave ao alternar os modos:

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

 
<script setup>
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>
 

Para implementar o modo de tema escuro, você precisará de lógica JavaScript para alternar entre temas claros e escuros. Em seu arquivo App.vue, cole o seguinte bloco de script abaixo do bloco de modelo escrito na API de composição do Vue:

O script acima inclui toda a lógica JavaScript para alternar entre os modos claro e escuro em seu aplicativo web. O script começa com uma instrução import para importar a função ref para lidar com dados reativos (dados dinâmicos) no Vue.

Em seguida, ele define uma função getInitialDarkMode que recupera a preferência do modo escuro do usuário no LocalStorage do navegador. Ele declara a referência darkMode, inicializando-a com a preferência do usuário recuperada pela função getInitialDarkMode.

A função saveDarkModePreference atualiza a preferência do modo escuro do usuário no LocalStorage do navegador com o método setItem. Finalmente, a função toggleDarkMode permitirá aos usuários alternar o modo escuro e atualizar o valor LocalStorage do navegador para o modo escuro.

Aplicando o tema do modo escuro e testando o aplicativo

 
<template>
  
       conditionally -->
  <div :data-theme="darkMode"> 
    <h1 class="header">Welcome to My Vue App</h1>
    <p>This is a simple Vue app with some text and styles.</p>
    
    <div class="styled-box">
      <p class="styled-text">Styled Text</p>
    </div>
     
    <button @click="toggleDarkMode" class="toggle-button">
      Toggle Dark Mode
    </button> 
  </div>
</template>
 

Agora, no bloco de modelo do seu arquivo App.vue, adicione o seletor de atributo data-theme ao elemento raiz para aplicar condicionalmente o tema do modo escuro com base em sua lógica:

Aqui, você está vinculando o seletor de tema de dados à referência darkMode. Isso garante que quando darkMode for verdadeiro, o tema escuro terá efeito. O ouvinte de evento de clique no botão alterna entre os modos claro e escuro.

 npm run dev

Execute o seguinte comando em seu terminal para visualizar o aplicativo:

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.