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

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 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:

<!-- App.vue -->
<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 styles.css.

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 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:

// 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 styles.css, abaixo do seletor data-theme. 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 (*) para criar uma animação suave ao alternar entre 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. Em seu arquivo App.vue, cole o seguinte bloco de script abaixo do bloco de modelo escrito na Composition API do Vue:

<!-- App.vue -->
<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>

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 de 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

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

<!-- App.vue -->
<template>
  <!-- added the data theme attribute selector to apply the dark theme
       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>
    <!--added the dark mode switch button--> 
    <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. 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.

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.