Cara melaksanakan mod gelap berdasarkan vue3 dan element-plus

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

<script setup>
import { useDark, useToggle } from &#39;@vueuse/core&#39;

const isDark = useDark()
const toggleDark = useToggle(isDark)

</script>

<template>
  <span @click.stop="toggleDark()">暗黑模式</span>
  <el-switch size="small" v-model="isDark"/>
</template>

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

html.dark {
  .my-dialog {
    background-color: #304156;
    color: #bfcbd9;
  }
}

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:

:root {
  --theme-color: #409EFF;
}
html.dark {
  --theme-color: #135fad;
}
.demo-class {background-color:var(--theme-color)}
.demo-class-one button {color:var(--theme-color)}

main.js:

html.dark {
  /* 覆盖element-plus默认深色背景色 */
  --el-bg-color: #626aef;
  .el-button--primary {
    --el-button-text-color: #ededed;
  }
}

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:

import 'element-plus/dist/index.css'
import './styles/demo.scss'

src/styles/index.scss:

$menuBg:var(--menuBg);
$menuActiveText:var(--themeColor);
$btnColor: var(--themeColor);

utama .js:

@import './variables.scss';

:root {
  --themeColor: #409EFF;
  --menuBg: #304156;
}
html.dark {
  --themeColor: #46ACFF;
  --menuBg: #263445;
}

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 imej

Selain imej, anda boleh menambah kelas dark-img-bg atau pemilih css lain pada bekas yang menggunakan imej sebagai imej latar belakang

rreeee

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!