Estamos publicando a segunda parte de uma série de artigos sobre a criação de um blog moderno com Nuxt.js. Hoje vamos implementar o tema escuro no aplicativo que escrevemos com você na primeira parte .
Observe que o código de cada parte pode ser encontrado em seu próprio tópico no Github , e a
master
versão do aplicativo do último artigo publicado está disponível.
O que é tema escuro?
Um tema escuro é um esquema de cores para qualquer interface que exibe texto claro e elementos da interface contra um fundo escuro, facilitando a visualização da tela em telefones celulares, tablets e computadores em condições de pouca luz. O tema escuro reduz a luz emitida da tela, mantendo a taxa de contraste de cor mínima necessária para a legibilidade.
O tema escuro melhora a ergonomia visual, reduzindo a fadiga ocular, ajustando a tela para se adequar às condições de iluminação atuais e proporcionando facilidade de uso à noite ou no escuro.
Além disso, lembre-se de que usar o tema escuro em aplicativos da web e móveis pode estender a vida útil da bateria do seu dispositivo. O Google confirmou que o tema escuro nas telas OLED é muito útil para estender a vida útil da bateria.
@ nuxtjs / color-mode
Para implementar o tema escuro, usaremos o módulo @ nuxtjs / color-mode , que fornece os seguintes recursos:
- Adiciona uma classe
.${color}-mode
à tag<html>
para facilitar o gerenciamento de temas CSS - funciona em qualquer modo
Nuxt
(static
,ssr
ouspa
); - detecta automaticamente o modo de cor do sistema no dispositivo do usuário e pode definir o tema apropriado com base nesses dados;
- permite que você sincronize o tema selecionado entre as guias e janelas;
- permite que você use os temas implementados para páginas individuais em vez de para o aplicativo inteiro (ideal para desenvolvimento incremental);
- o módulo também suporta IE9 + (não tenho certeza se isso ainda é relevante no desenvolvimento moderno, mas pode ser útil para alguém).
Primeiro, vamos instalar o módulo:
npm i --save-dev @nuxtjs/color-mode
Em seguida, adicione informações sobre este módulo à seção
buildModules
do arquivo
nuxt.config.js
:
{
buildModules: [
'@nuxtjs/color-mode'
]
}
Multar! Agora, se executarmos nosso aplicativo e abrirmos uma guia
Elements
no console do desenvolvedor, veremos que
html
uma classe foi adicionada à tag que corresponde ao tema do sistema operacional, por exemplo, em nosso caso
class="light-mode"
.
Alternador de tema
Na próxima etapa, vamos implementar um switch que mudará o tema escuro para o tema claro e vice-versa.
Se observarmos o design de nosso aplicativo na Figma, podemos ver que ao lado do alternador de tema também existe um alternador de idioma, que implementaremos em um dos próximos artigos desta série.
Vamos escrever imediatamente um componente wrapper que encapsulará essas opções e será responsável pelas margens antes de outros componentes.
Para fazer isso, crie um componente
AppOptions
com o seguinte conteúdo:
<template lang="pug">
section.section
.content
.app-options
switcher-color-mode
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'AppOptions',
})
</script>
<style lang="scss" scoped>
.app-options {
display: flex;
margin-top: 24px;
}
</style>
Componente no Github .
Como podemos ver, não há lógica neste componente, ele apenas define as margens dos componentes aninhados. Agora temos apenas um componente aninhado
switcher-color-mode
, vamos implementá-lo.
Vamos dar uma olhada na seção
script
deste componente:
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'SwitcherColorMode',
computed: {
icon() {
return (this as any).$colorMode.value === 'light'
? 'assets/icons/sun.svg'
: 'assets/icons/moon.svg'
},
},
methods: {
changeColorMode() {
;(this as any).$colorMode.preference =
(this as any).$colorMode.value === 'light' ? 'dark' : 'light'
},
},
})
</script>
Aqui estamos implementando um método
changeColorMode
que muda o tema no objeto fornecido pelo módulo
@nuxtjs/color-mode
.
Quando o valor é alterado
$colorMode.preference
, a classe correspondente do tag também será definida
html
:
class="light-mode"
ou
class="dark-mode"
.
Além disso, existe uma propriedade computada
icon
que retorna o ícone de que precisamos, dependendo do tema selecionado. Observe que, para funcionar corretamente, você precisa adicionar ícones
sun.svg
e
moon.svg
diretório
assets/icons
.
O modelo de componente terá a seguinte aparência:
<template lang="pug">
button(@click="changeColorMode")
img(
alt="theme-icon"
:src="getDynamicFile(icon)"
)
</template>
Tudo é muito simples aqui! Temos um botão, quando clicamos no qual chamamos um método
changeColorMode
e mudamos nosso tema. Dentro do botão, mostramos uma imagem do tema selecionado.
Componente no Github .
Resta apenas adicionar este componente à página principal do nosso aplicativo. Depois disso, o modelo de página deve ter a seguinte aparência:
<template lang="pug">
.page
section-header(
title="Nuxt blog"
subtitle="The best blog you can find on the global internet"
)
app-options
post-list
</template>
Gestão de variáveis
Como você deve se lembrar da primeira parte, usamos
scss
variáveis para definir todas as cores do aplicativo , e agora tudo o que temos a fazer é alterar os valores dessas variáveis em função do tema escolhido.
Mas o problema é que as
scss
variáveis são definidas uma vez ao construir o aplicativo e, no futuro, não podemos redefini-las ao alterar o tema.
Essa limitação pode ser contornada com a ajuda
js
, mas há uma solução muito mais simples: podemos usar
css
variáveis nativas .
Agora, em nosso arquivo com variáveis, a
assets/styles/variables.scss
seção com cores se parece com isto:
// colors
$text-primary: rgb(22, 22, 23);
$text-secondary: rgb(110, 109, 122);
$line-color: rgb(231, 231, 233);
$background-color: rgb(243, 243, 244);
$html-background-color: rgb(255, 255, 255);
Vamos primeiro definir dois esquemas de cores no mesmo arquivo - claro e escuro - usando
css
variáveis:
:root {
// light theme
--text-primary: rgb(22, 22, 23);
--text-secondary: rgb(110, 109, 122);
--line-color: rgb(231, 231, 233);
--background-color: rgb(243, 243, 244);
--html-background-color: rgb(255, 255, 255);
// dark theme
&.dark-mode {
--text-primary: rgb(250, 250, 250);
--text-secondary: rgb(188, 187, 201);
--line-color: rgb(45, 55, 72);
--background-color: rgb(45, 55, 72);
--html-background-color: rgb(26, 32, 44);
}
}
Definimos as
css
variáveis no seletor
:root
. Por padrão, uma
css
variável é especificada e usada com um prefixo
--
. Leia
sobre a
css
pseudo- aula
:root
no MDN e W3Schools . Citação de
MDN
: A
css
pseudo classe
:root
encontra o elemento raiz da árvore do documento. Aplica-se a HTML,
:root
encontra uma tag
html
e é idêntico ao seletor de tag html, mas sua especificidade é maior.
Como podemos ver, aquelas cores que foram previamente escritas diretamente no
scss
variáveis agora são especificadas em
css
variáveis como valores padrão e, se uma classe estiver presente,
.dark-mode
esses valores serão substituídos.
Agora, nossas
scss
variáveis de cor ficarão assim:
$text-primary: var(--text-primary);
$text-secondary: var(--text-secondary);
$line-color: var(--line-color);
$background-color: var(--background-color);
$html-background-color: var(--html-background-color);
Ao mudar o tema, o esquema de cores mudará de acordo com os valores dados e não precisamos mudar nada nos componentes já implementados.
Conclusão
Graças a este artigo, aprendemos como implementar um tema escuro para um aplicativo Nuxt.js.
Você conseguiu completar todas as etapas? Você acha que o tema escuro é apenas um exagero ou é uma necessidade? Compartilhe suas idéias nos comentários.
Links para os materiais necessários: