1. Penggunaan asas
Kerana dengan menambahkan kelas dark
pada teg html, anda boleh menukar sendiri
Tetapi untuk Untuk penukaran yang mudah dan penyesuaian lanjut, gunakanDark | VueUse secara rasmi disyorkan Mod
1 2 3 4 5 6 7 8 9 10 11 12 | <script setup>
import { useDark, useToggle } from & #39;@vueuse/core'
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<template>
<span @click.stop= "toggleDark()" >暗黑模式</span>
<el- switch size= "small" v-model= "isDark" />
</template>
|
Salin selepas log masuk
2. Gaya gelap tersuai
Dalam mod gelap, setelah gaya bukan gelap dicampur, ia akan menjadi sangat hodoh dan mempesonakan. Penyesuaian mod gelap bagi beberapa gaya tersuai sangat diperlukan
1 Gaya gelap
elemen-tambah mentakrifkan beberapa pembolehubah dalam mod gelap untuk memenuhi penyesuaian mod gelap gayanya sendiri <. 🎜>
ditetapkan dalam gaya warna projek tidak boleh disesuaikan secara automatik. ditakrifkan sebagai pembolehubah untuk digunakan semula, jadi , anda boleh menyesuaikan diri dengan mod gelap melalui penggantian pembolehubah mudah
1 2 3 4 5 6 | html.dark {
.my-dialog {
background-color : #304156 ;
color : #bfcbd9 ;
}
}
|
Salin selepas log masuk
3 elemen-tambah, anda boleh mentakrifkan dan menulis gantinya sekali lagi Of. Untuk liputan yang betul, gaya berikut perlu diimport selepas memperkenalkan gaya elemen-tambah
src/styles/demo.scss:
1 2 3 4 5 6 7 8 | :root {
--theme- color : #409EFF ;
}
html.dark {
--theme- color : #135fad ;
}
.demo-class { background-color :var(--theme-color)}
.demo-class-one button { color :var(--theme-color)}
|
Salin selepas log masuk
main.js:
1 2 3 4 5 6 7 | html.dark {
--el-bg- color : #626aef ;
.el-button--primary {
--el-button-text- color : #ededed ;
}
}
|
Salin selepas log masuk
4. pembolehubah scss
scss mentakrifkan pembolehubah dan memperkenalkannya ke dalam gaya lain. Digabungkan dengan pembolehubah css, penyesuaian mod gelap juga boleh direalisasikan dengan mudah
src/styles/variables.scss:
1 2 | import & #39;element-plus/dist/index.css'
import & #39;./styles/demo.scss'
|
Salin selepas log masuk
src/styles/index.scss:
1 2 3 | $menuBg:var(--menuBg);
$menuActiveText:var(--themeColor);
$btnColor: var(--themeColor);
|
Salin selepas log masuk
utama .js:
1 2 3 4 5 6 7 8 9 10 | @import &# 39 ;./variables.scss&# 39 ;;
:root {
--themeColor: #409EFF ;
--menuBg: #304156 ;
}
html.dark {
--themeColor: #46ACFF ;
--menuBg: #263445 ;
}
|
Salin selepas log masuk
Setelah berkata demikian, jika anda hanya menggunakan pembolehubah scss sebagai pembolehubah css, mengapa tidak menggunakan pembolehubah css secara langsung? Selain itu, pembolehubah css juga boleh ditukar menggunakan js
3. Gambar dalam mod gelap
Penyelesaian kod satu baris yang terdapat pada penapis imej mod Gelap CodePen
Malah, kecerahan dan ketepuan imej ditetapkan dengan menggunakan penapis CSS3:
Apabila imej dipaparkan dalam mod gelap, beberapa bahagian akan menjadi lebih terang dan mempesonakan. Anda boleh menggunakan penapis CSS untuk menetapkan kecerahan dan ketepuan imejSelain imej, anda boleh menambah kelas dark-img-bg atau pemilih css lain pada bekas yang menggunakan imej sebagai imej latar belakangrreeee
Atas ialah kandungan terperinci Cara melaksanakan mod gelap berdasarkan vue3 dan element-plus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!