Kami menerbitkan bagian kedua dari rangkaian artikel tentang cara membuat blog modern dengan Nuxt.js. Hari ini kami akan menerapkan tema gelap dalam aplikasi yang kami buat bersama Anda di bagian pertama .
Harap dicatat bahwa kode untuk setiap bagian dapat ditemukan di utasnya sendiri di Github , dan
master
versi aplikasi dari artikel yang terakhir diterbitkan tersedia.
Apa itu tema gelap?
Tema gelap adalah skema warna untuk semua antarmuka yang menampilkan teks terang dan elemen antarmuka dengan latar belakang gelap, sehingga lebih mudah untuk melihat layar di ponsel, tablet, dan komputer dalam kondisi kurang cahaya. Tema gelap mengurangi cahaya yang dipancarkan dari layar sambil mempertahankan rasio kontras warna minimum yang diperlukan untuk keterbacaan.
Tema gelap meningkatkan ergonomi visual dengan mengurangi ketegangan mata dengan menyesuaikan layar agar sesuai dengan kondisi pencahayaan saat ini dan memberikan kemudahan penggunaan di malam hari atau dalam gelap.
Selain itu, perlu diingat bahwa menggunakan tema gelap di web dan aplikasi seluler dapat memperpanjang masa pakai baterai perangkat Anda. Google telah mengonfirmasi bahwa tema gelap pada layar OLED sangat membantu dalam memperpanjang usia baterai.
@ nuxtjs / mode-warna
Untuk mengimplementasikan tema gelap, kita akan menggunakan modul @ nuxtjs / color-mode , yang menyediakan kemampuan berikut:
- Menambahkan kelas
.${color}-mode
ke tag<html>
untuk mempermudah pengelolaan tema CSS - bekerja dalam mode apa pun
Nuxt
(static
,ssr
atauspa
); - secara otomatis mendeteksi mode warna sistem pada perangkat pengguna dan dapat menyetel tema yang sesuai berdasarkan data ini;
- memungkinkan Anda untuk menyinkronkan tema yang dipilih antara tab dan jendela;
- memungkinkan Anda untuk menggunakan tema yang diimplementasikan untuk halaman individual daripada untuk keseluruhan aplikasi (ideal untuk pengembangan tambahan);
- modul ini juga mendukung IE9 + (Saya tidak yakin apakah ini masih relevan dalam perkembangan modern, tetapi mungkin berguna bagi seseorang).
Pertama, mari instal modul:
npm i --save-dev @nuxtjs/color-mode
Dan kemudian tambahkan informasi tentang modul ini ke bagian
buildModules
di file
nuxt.config.js
:
{
buildModules: [
'@nuxtjs/color-mode'
]
}
Baik! Sekarang, jika kita menjalankan aplikasi kita dan membuka tab
Elements
di konsol pengembang, kita akan melihat bahwa
html
kelas telah ditambahkan ke tag yang sesuai dengan tema sistem operasi, misalnya, dalam kasus kita
class="light-mode"
.
Pengalih tema
Pada langkah berikutnya, mari terapkan sakelar yang akan mengubah tema gelap menjadi tema terang dan sebaliknya.
Jika kita melihat desain aplikasi kita di Figma, kita dapat melihat bahwa di samping pengalih tema juga terdapat pengalih bahasa, yang akan kita implementasikan di salah satu artikel berikutnya dalam seri ini.
Mari kita segera menulis komponen pembungkus yang akan merangkum sakelar ini dan bertanggung jawab atas margin sebelum komponen lainnya.
Untuk melakukan ini, buat komponen
AppOptions
dengan konten berikut:
<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>
Komponen di Github .
Seperti yang bisa kita lihat, tidak ada logika dalam komponen ini, ini hanya menetapkan margin untuk komponen bersarang. Sekarang kita hanya memiliki satu komponen bersarang
switcher-color-mode
, mari kita implementasikan.
Mari kita lihat bagian dari
script
komponen ini:
<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>
Di sini kami mengimplementasikan metode
changeColorMode
yang mengubah tema di objek yang disediakan oleh modul
@nuxtjs/color-mode
.
Saat nilainya diubah
$colorMode.preference
, kelas tag yang sesuai juga akan disetel
html
:
class="light-mode"
atau
class="dark-mode"
.
Selain itu, ada properti komputasi
icon
yang mengembalikan ikon yang kita butuhkan, bergantung pada tema yang dipilih. Harap dicatat bahwa untuk bekerja dengan benar Anda perlu menambahkan ikon
sun.svg
dan
moon.svg
direktori
assets/icons
.
Template komponen akan terlihat seperti ini:
<template lang="pug">
button(@click="changeColorMode")
img(
alt="theme-icon"
:src="getDynamicFile(icon)"
)
</template>
Semuanya cukup sederhana di sini! Kami memiliki tombol, ketika kami mengklik yang kami sebut metode
changeColorMode
dan mengubah tema kami. Di dalam tombol, kami menampilkan gambar dari tema yang dipilih.
Komponen di Github .
Tetap hanya menambahkan komponen ini ke halaman utama aplikasi kita. Setelah itu, template halaman akan terlihat seperti ini:
<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>
Manajemen variabel
Seperti yang mungkin Anda ingat dari bagian pertama, kami menggunakan
scss
variabel untuk menentukan semua warna dalam aplikasi , dan sekarang yang harus kami lakukan adalah mengubah nilai variabel ini tergantung pada tema yang dipilih.
Tetapi masalahnya adalah
scss
variabel-variabel tersebut disetel satu kali saat membangun aplikasi, dan di masa mendatang kita tidak dapat mendefinisikannya kembali saat mengubah tema.
Batasan ini dapat dielakkan dengan bantuan
js
, tetapi ada solusi yang jauh lebih sederhana: kita dapat menggunakan
css
variabel asli .
Sekarang di file kami dengan variabel,
assets/styles/variables.scss
bagian dengan warna terlihat seperti ini:
// 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);
Pertama-tama, tentukan dua skema warna dalam file yang sama - terang dan gelap - menggunakan
css
variabel:
: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);
}
}
Kami telah menentukan
css
variabel di selektor
:root
. Secara standar,
css
variabel ditentukan dan digunakan dengan awalan
--
. Baca
tentang
css
pseudo- class
:root
di MDN dan W3Schools . Kutipan dari
MDN
: Kelas
css
pseudo
:root
menemukan elemen root dari pohon dokumen. Berlaku untuk HTML,
:root
menemukan tag
html
dan identik dengan pemilih tag html, tetapi kekhususannya lebih tinggi.
Seperti yang bisa kita lihat, warna-warna yang sebelumnya ditulis langsung di dalamnya
scss
variabel sekarang ditentukan dalam
css
variabel sebagai nilai default, dan jika ada kelas,
.dark-mode
nilai ini akan diganti.
Sekarang
scss
variabel warna kita akan terlihat seperti ini:
$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);
Saat mengganti tema, skema warna akan berubah sesuai dengan nilai yang diberikan dan kita tidak perlu mengubah apapun pada komponen yang sudah diimplementasikan.
Kesimpulan
Berkat artikel ini, kami belajar bagaimana menerapkan tema gelap untuk aplikasi Nuxt.js.
Apakah Anda berhasil menyelesaikan semua langkah? Apakah menurut Anda tema gelap itu hanya sekedar hype atau itu suatu keharusan? Bagikan pemikiran Anda di komentar.
Tautan ke materi yang dibutuhkan: