暗黑模式是說明
暗黑模式是指在應(yīng)用程序或操作系統(tǒng)中使用暗色背景和淺色文本的界面設(shè)計。與傳統(tǒng)的亮色模式相比，暗黑模式具有以下特點：
-
減少眼部疲勞：使用暗色背景可以減少屏幕發(fā)出的藍光，減輕長時間使用電子設(shè)備對眼睛的疲勞程度。這對于在晚上或低光環(huán)境下使用設(shè)備的人來說尤為重要。
-
節(jié)省電池壽命：在有機發(fā)光二極管（OLED）或柔性有機發(fā)光二極管（AMOLED）屏幕上，黑色像素是不發(fā)光的，因此在暗黑模式下使用這些屏幕可以節(jié)省電池壽命，延長續(xù)航時間。
-
強調(diào)內(nèi)容：暗黑模式通過減少背景的明亮度，使內(nèi)容元素更加突出。這有助于提高可讀性，并使用戶更專注于應(yīng)用程序或網(wǎng)站中的核心信息。
-
美觀與時尚：暗黑模式因其現(xiàn)代感和時尚外觀而受到很多用戶的歡迎。它為用戶提供了一種與傳統(tǒng)亮色界面不同的視覺體驗。
暗黑模式現(xiàn)在廣泛應(yīng)用于各種應(yīng)用程序和操作系統(tǒng)中，包括移動設(shè)備、計算機操作系統(tǒng)和各種在線服務(wù)。許多應(yīng)用程序和平臺都提供了切換到暗黑模式的選項，以便用戶根據(jù)自己的偏好進行設(shè)置。
前端如何實現(xiàn)，邏輯是什么
在前端實現(xiàn)暗黑模式時，主要涉及以下幾個方面的邏輯：
-
CSS樣式：使用CSS來定義不同主題下的樣式。創(chuàng)建兩套樣式表，一套是亮色主題的樣式表，另一套是暗黑主題的樣式表。根據(jù)當前選擇的主題，動態(tài)加載相應(yīng)的樣式表。
-
主題切換：為用戶提供切換主題的選項，通常是一個切換按鈕或開關(guān)。當用戶切換主題時，通過JavaScript來切換樣式表。
-
存儲用戶選擇：為了記住用戶的主題偏好，可以使用本地存儲（如localStorage）來保存用戶選擇的主題。這樣，在下次訪問時，可以根據(jù)存儲的值來加載正確的主題。
vue3 + element-plus 項目中實現(xiàn)
- main 引入暗黑主題css
import ‘element-plus/theme-chalk/dark/css-vars.css’
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import 'element-plus/theme-chalk/dark/css-vars.css'
import '@/styles/main.css'
import pinia from '@/store'
const app = createApp(App)
app.use(ElementPlus, { locale: zhCn })
app.use(pinia)
app.use(router)
app.mount('#app')
import '@/router/permission'
- index.html配置
class=“l(fā)ight”
<!DOCTYPE html>
<html lang="zh-CN" class="light">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渠道管理</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
- 具體實現(xiàn)組件
<template>
<div class="dark-box">
<el-button text class="switch" :class="isDark ? 'isDark-switch' : 'noDark-switch'" @click="toggleDark">
<el-icon v-if="isDark">
<svg viewBox="0 0 24 24">
<path
d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
fill="currentColor"></path>
</svg>
</el-icon>
<el-icon v-else>
<svg viewBox="0 0 24 24">
<path
d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
fill="currentColor"></path>
</svg>
</el-icon>
</el-button>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isDark = ref(true)
const toggleDark = () => {
isDark.value = !isDark.value
const html = document.querySelector('html')
if (html) {
if (isDark.value) {
html.classList.remove("dark");
html.classList.add("light");
} else {
html.classList.remove("light");
html.classList.add("dark");
}
}
}
</script>
<style scoped lang="scss">
.dark-box {
margin-right: 20px;
}
.switch {
width: 40px;
height: 20px;
border: 1px solid #dcdfe6;
border-radius: 10px;
box-sizing: border-box;
cursor: pointer;
padding-bottom: 0;
padding-top: 0px;
background-color: #ebeef5 !important;
font-size: 12px;
}
.isDark-switch {
.el-icon {
background-color: #fff !important;
padding: 2px;
border-radius: 50%;
color: #000;
margin-left: -8px;
}
}
.noDark-switch {
background-color: rgb(8, 8, 8) !important;
.el-icon {
color: #fff;
margin-left: 15px;
}
}
</style>
- 引入 組件（具體開關(guān)組件）
<template>
// 省略...
<Dark />
</template>
<script setup lang="ts">
import Dark from './dark.vue'
</script>
5.示例
6. 總結(jié)
使用Vue 3和TypeScript編寫，實現(xiàn)了一個切換暗黑模式的功能。代碼中使用了Element Plus UI庫來展示按鈕和圖標。
首先，在模板部分定義了一個按鈕，其中使用了isDark變量來決定顯示哪個圖標，通過@click事件綁定toggleDark函數(shù)來切換主題。
在<script setup>塊中，使用ref函數(shù)創(chuàng)建了一個名為isDark的響應(yīng)式變量，并定義了toggleDark函數(shù)。當點擊按鈕時，toggleDark函數(shù)會切換isDark的值，并根據(jù)isDark的值添加或移除HTML元素的類名來切換主題。
最后，在樣式部分，使用了SCSS語法來定義按鈕的樣式。.switch類定義了按鈕的基本樣式，.isDark-switch和.noDark-switch類分別定義了暗黑模式和非暗黑模式下的樣式。
需要注意的是，代碼中使用了scoped關(guān)鍵字來限定樣式的作用域，確保樣式只應(yīng)用于當前組件。文章來源：http://www.zghlxwxcb.cn/news/detail-476296.html
總體來說，通過按鈕的點擊事件，動態(tài)切換主題，并根據(jù)主題切換來添加或移除HTML元素的類名，從而實現(xiàn)了暗黑模式的切換效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-476296.html
到了這里，關(guān)于vue3 element-plus 暗黑模式（主題切換）簡易版的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
