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 <. 🎜>

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

: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

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

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

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

@import './variables.scss';

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