30分钟让你的网站支持暗黑模式

发布时间：2024年01月18日

暗色模式作为一种软件界面风格,可以有效减少长时间观看屏幕的视觉疲劳,近年来受到越来越多用户的欢迎。本文将简单介绍实现网站暗黑模式的方法,通过CSS和JavaScript配合,在半个小时内做出更加眼睛友好的界面的效果!

一、暗黑模式的优势

简单来说,暗黑模式(Dark Mode)就是一种软件或网站界面的风格选择,其中背景使用深色调配合明亮的前景色文本和图像。如今在智能手机和桌面操作系统上可以选择切换至暗色模式已是常见设置;而在网站和应用中也逐渐见到页面暗黑模式的需求。

暗黑模式的优势有:

  1. 减轻视觉疲劳:在深色环境中观看屏幕,眼睛的适应性和舒适性更高;
  2. 节省电量:对OLED等显示器来说,显示深色需要消耗更少能量;
  3. 增强氛围:深邃内斂的黑色可以营造出电影、游戏等氛围。

本教程将手把手教你仅用 HTML、CSS 和几行JavaScript 代码,就可以在半个小时内为任何网站添加暗黑模式的切换效果。完成后可以自由转换正常和黑暗两种风格。

二、HTML页面结构准备

首先,我们需要准备好一个普通的HTML页面。为简单起见,仅包括一些基础文本和图片元素:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>

<body>

  <h1>我的网站</h1>

  <p>这里是一些简单段落文字内容</p>

  <img src="light-img.png"/>

  <p>更多文字描述......</p>

</body>
</html>

接下来通过CSS和JavaScript添加暗黑模式的切换效果。

三、添加CSS样式规则

我们先为普通模式添加一些基础CSS样式:

body {
  background-color: #fff;
  color: #333; 
}

img {
  border: 1px solid #ccc;
}

h1 {
  color: #09f;
}

标准的白色背景和黑色文字。

然后添加暗模式的样式规则:

body.dark {
  background-color: #333;
  color: #eee;
}  

body.dark img {
  border: 1px solid #777;  
}

body.dark h1 {
  color: #d96d34;
}

注意这里通过 body.dark 来设定仅在body包含dark类时生效的样式。

这样简单通过CSS我们就在不改HTML的情况下定义出了暗黑版本的样式。

四、控制切换效果

利用JavaScript我们可以动态添加和删除dark类来控制暗黑模式的开启或关闭:

function toggleDark() {

  var body = document.body;

  if(body.classList.contains('dark')) {  
    body.classList.remove('dark');
  } else {
    body.classList.add('dark');    
  }

}

然后在页面添加一个切换开关按钮,调用这个toggle函数即可:

<button onclick="toggleDark()">切换模式</button>

点击时即可触发明暗主题切换!

此外,也可以根据系统外观自动判断:

if (matchMedia('(prefers-color-scheme: dark)').matches) {
  toggleDark(); 
}

五、适配更多元素和页面

针对其他元素的style,比如菜单、表格、输入框等,也可以类似地添加 .dark 变体来定义暗黑样式。

比如：

/* 更多暗黑元素样式 */
.dark .menu {
  background: #000;
  border: 1px solid #555; 
}

.dark .form-control {
  background-color: #555;
  color: #aaa;  
}

此外,暗黑模式也可以轻松应用于我们网站的其他各个页面中,只需简单引入上述的JavaScript逻辑和CSS样式即可实现切换。

根据喜好可以定制主题配色,transition动画效果等让模式切换更顺畅。

六、兼容多页面及功能扩展

由于样式和切换逻辑是独立的,所以支持暗黑模式的效果也可以非常容易地应用到网站中的任意其他页面上,而不需要重复额外工作:

  • 引入 styles.css 供所有页面共享明暗模式样式规则;
  • 拷贝切换代码或封装为功能函数直接调用。

只要简单引入这两个部分,整个站点就能一键启用暗黑选项。

根据个性化需求,切换动画、自动判断系统主题等功能也可以很方便集成进来。

总结

通过这个简短的教程和示例,希望大家学会了如何利用 CSS 和 JavaScript 来轻松为网站启用暗黑模式单个及批量页面兼容。这个漂亮的切换功能,也让我们的网站更加符合现代化需求和阅读舒适体验!

文章来源:https://blog.csdn.net/X_StarX/article/details/135668828
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章