使用 VanillaJS 的简单深色/浅色主题
深色模式的设计和功能，以及在深色和浅色主题之间切换的功能，是目前流行的 UI/UX 设计趋势🔥。所以，这里提供一个创建简单深色/浅色切换按钮的指南。
为了保持简洁，我没有使用任何花哨的切换开关，只用了一个简单的按钮。Codepen
链接在文末。🤖
让我们从HTML开始。
我使用列表来存储导航栏元素，所以<li class="nav-item" id="toggle">🌞</li>
HTML部分到此结束，接下来我们来学习CSS。
CSS
// by default dark theme
:root {
--bg-color: #171923;
--bg-light: #232535;
--font-color: #c5cddb;
--font-light: #ffffff;
}
// light theme colors
.lightMode {
--bg-color: #E8E6DC;
--bg-light: #DCDACA;
--font-color: #3D3D3D;
--font-light: #202020;
}
lightMode这是一个可以通过 js 添加到 body 中的类。
最后一部分 - Javascript
const toggle = document.querySelector("#toggle");
toggle.addEventListener("click", modeSwitch);
let isLight = true;
function modeSwitch() {
isLight = !isLight;
isLight ? toggle.innerText = "🌞" : toggle.innerText = "🌚";
var rootElement = document.body;
rootElement.classList.toggle("lightMode");
}
什么是切换功能？
- 切换是方法
DOMTokenList() interface. - 它从令牌列表中移除令牌并返回 false。
- 如果令牌不存在，则添加令牌并返回 true。
怎么了？
当我们点击切换按钮时，事件监听器会响应并调用modeSwitch()函数。该modeSwitch()函数会将类lightMode添加到 body 元素，从而激活lightMode颜色方案。
贡献者@casiimir
创建深色/浅色模式切换的方法有很多种。我找到一种简单的方法，并在此解释它的工作原理。
欢迎大家提出建议和反馈🤩。