一键切换暗黑模式,这些代码片段你不可错过

文章目录

  • 前言
  • 正文
    • 1.多主题切换
    • 2.使用 SASS 实现轻松深色模式
    • 3.动画切换浅色与深色模式
    • 4.纯 CSS 主题切换
    • 5.GitHub 风格的深色模式切换
    • 6.持久深色模式
    • 7.基本 Vue 响应式切换
    • 8.创意灯泡切换
  • 总结


前言

如今,许多网站设计师都会为用户提供浅色和深色模式的选择。这不仅仅是为了美观,更是为了提高网页的可访问性,尤其是对视力有障碍的用户来说,深色模式更友好。让用户自由切换自己喜欢的模式,是提升用户体验的关键。


正文

1.多主题切换

这个设置面板提供了浅色、深色和黑色三种模式。切换过程平滑流畅,带来更好的用户体验。通过 HTML 单选按钮实现的切换功能,简洁美观又实用。

源码:https://codepen.io/havardob/pen/dyOJyje

在这里插入图片描述

2.使用 SASS 实现轻松深色模式

通过简单的复选框触发切换,JavaScript 添加 data-theme 属性到 HTML 标签上,SASS 根据该属性的值来实现不同样式的切换。

源码:https://codepen.io/KaioRocha/pen/MdvWmg

在这里插入图片描述

3.动画切换浅色与深色模式

此代码片段利用 SVG 图片和动画效果实现了独特的日夜模式切换。虽然视觉效果出色,但在正式上线之前,最好加强对可访问性的支持。

源码: https://codepen.io/lerida/pen/ZEbWBjp

在这里插入图片描述

4.纯 CSS 主题切换

这个例子只使用 CSS 即可实现模式切换,并且通过 HTML 表单确保了对所有用户的可访问性。

源码:https://codepen.io/michellebarker/pen/GzzrGJ

在这里插入图片描述

5.GitHub 风格的深色模式切换

这个大尺寸的切换按钮不仅会改变页面的对比模式,还会根据模式的变化调整背景颜色,非常有趣。

源码:https://codepen.io/chintuyadav/pen/yLaaVYa

在这里插入图片描述

6.持久深色模式

如果你追求简约,这款模式切换按钮就是理想选择。通过 JavaScript 将用户的选择存储在本地,保持他们的偏好不变。

源码:https://codepen.io/brianhaferkamp/pen/WNrJmZb

在这里插入图片描述

7.基本 Vue 响应式切换

随着越来越多的用户界面依赖 JavaScript,Vue 组件的实现让用户可以通过简单的复选框轻松切换模式。

源码:https://codepen.io/team/codepen/pen/MRoLdr

在这里插入图片描述

8.创意灯泡切换

这款摆动的灯泡切换设计非常具有创意,通过 CSS 动画实现了独特的深色模式转换,非常适合用于个人作品集或博客。

源码:https://codepen.io/airen/pen/dyYNPWQ

在这里插入图片描述


总结

为网站提供深浅模式切换,不仅提升美观,还改善用户体验,尤其对有视觉障碍的用户有帮助。通过 CSS 和 JavaScript,可以轻松实现这个功能。上述8个代码片段展示了如何优雅地切换模式,既美观又实用,能有效提升网站的可用性和用户满意度。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/906196.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Spring之依赖注入(DI)和控制反转(IoC)——配置文件、纯注解

依赖注入 依赖注入(Dependency Injection,简称 DI)与控制反转(loC)的含义相同,只不过这两 个称呼是从两个角度描述的同一个概念。对于一个 Spring 初学者来说,这两种称呼很难理解, 下面我们将通过简单的语言来描述这两个概念。 当Java对象&…

Node.js:内置模块

Node.js:内置模块 Node.jsfs模块读取文件写入文件__dirname path模块路径拼接文件名解析 http模块创建服务 Node.js 传统的JavaScript是运行在浏览器的,浏览器就是其运行环境。 浏览器提供了JavaScript的API,以及解析JavaScript的解析引擎&a…

什么是工单管理系统?最全百科

在现代企业的客户服务和支持过程中,工单管理系统扮演着至关重要的角色。它不仅帮助企业高效地处理客户请求,还能提升客户满意度和忠诚度。本文将深入探讨工单管理系统的定义、功能、优势,并推荐使用Zoho Desk作为理想的解决方案。 一、工单管…

橙子电视 1.02 | 无广告,高清秒播,频道丰富

橙子电视版是针对智能电视和电视盒子而开发的一款在线观看电视应用软件,目前已经更名为橙色电视Live。该软件最大的特色是完全免费,并且支持几乎国内所有的电视台,无论是央视频道,还是省卫视频道应有尽有。同时为了更好的服务用户…

C++模拟实现list

C教学总目录 C模拟实现list 1、成员变量2、迭代器3、insert函数4、erase函数5、pop_back、push_front、pop_front函数6、size和clear函数7、析构函数8、拷贝构造函数9、赋值运算符重载完整代码(包含测试代码) 1、成员变量 先来看看SGI版本STL中list的实…

《高频电子线路》 —— 反馈型振荡器

文章内容来源于【中国大学MOOC 华中科技大学通信(高频)电子线路精品公开课】,此篇文章仅作为笔记分享。 反馈型振荡器基本工作原理 振荡器分类 自激:没有信号输入他激:有信号输入RC振荡器主要产生低频的正弦波&#x…

如何在Linux下安装和配置Docker

文章目录 安装前的准备在Debian/Ubuntu上安装Docker添加Docker仓库安装Docker验证安装 在CentOS/RHEL上安装Docker安装必要的软件包设置Docker仓库安装Docker启动Docker服务 Docker的基本使用拉取一个镜像运行一个容器 配置Docker创建Docker目录使用非root用户运行Docker 结语 …

1-petalinux 问题记录-根文件系统分区问题

在MPSOC上使用SD第二分区配置根文件系统的时候,需要选择对应的bootargs,但是板子上有emmc和sd两个区域,至于配置哪一种mmcblk0就出现了问题,从vivado中的BlockDesign和MLK XCZU2CG原理图来看的话,我使用的SD卡应该属于…

分类算法——支持向量机 详解

支持向量机(Support Vector Machine, SVM)的底层原理 支持向量机是一种用于分类和回归的强大机器学习算法,最常见的是用于二分类任务。SVM 的核心思想是通过找到一个最优超平面,将数据集划分成不同的类别。SVM 尤其擅长处理高维数…

系统集成项目管理工程师考试时间

系统集成项目管理基础知识考试信息 题量:共 75 道题。考试时间:该科目考试时间为上午 8:30 - 12:30(或下午 14:30 - 18:30,但通常为上午)。基础知识科目最短作答时长 90…

微服务实战系列之玩转Docker(十六)

导览 前言Q:基于容器云如何实现高可用的配置中心一、etcd入门1. 简介2. 特点 二、etcd实践1. 安装etcd镜像2. 创建etcd集群2.1 etcd-node12.2 etcd-node22.3 etcd-node3 3. 启动etcd集群 结语系列回顾 前言 Docker,一个宠儿,一个云原生领域的…

【论文解读】Med-BERT: 用于疾病预测的大规模结构化电子健康记录的预训练情境化嵌入

【论文解读】Med-BERT: 用于疾病预测的大规模结构化电子健康记录的预训练情境化嵌入 Med-BERT:pretrained contextualized embeddings on large-scale structured electronic health records for disease prediction ​ ​ 摘要:基于电子健康记录(EHR)的深度学习(DL)预…

API接口开放与安全管控 - 原理与实践

API安全是接口开放的前提条件 在API对外开放时,确保其安全性至关重要,因为API直接暴露给外部环境,容易成为攻击目标。一旦被恶意利用,可能导致数据泄露、服务滥用等严重后果。因此,通过API网关实施严格的接口安全管理…

python实现钉钉群机器人消息通知(消息卡片)

直接上代码 python """ 飞书群机器人发送通知 """ import time import urllib3 import datetimeurllib3.disable_warnings()class DingTalkRobotAlert():def __init__(self):self.webhook webhook_urlself.headers {Content-Type: applicatio…

32位汇编——通用寄存器

通用寄存器 什么是寄存器呢? 计算机在三个地方可以存储数据,第一个是把数据存到CPU中,第二个把数据存到内存中,第三个把数据存到硬盘上。 那这个所谓的寄存器,就是CPU中用来存储数据的地方。那这个寄存器有多大呢&a…

强大的接口测试可视化工具:Postman Flows

Postman Flows是一种接口测试可视化工具,可以使用流的形式在Postman工作台将请求接口、数据处理和创建实际流程整合到一起。如下图所示 Postman Flows是以API为中心的可视化应用程序开发界面。它提供了一个无限的画布用于编排和串连API,数据可视化来显示…

JavaScript 实战技巧:让你成为前端高手的必备知识3(进阶版)

一、DOM概述 (一)DOM操作 是指使用‌JavaScript操作文档对象模型(Document Object Model)的过程。‌文档对象模型是一种表示网页文档结构的方式,它将整个网页文档表示为一个树形结构,每个元素都是一个节点…

Python 网络爬虫教程:从入门到高级的全面指南

Python 网络爬虫教程:从入门到高级的全面指南 引言 在信息爆炸的时代,网络爬虫(Web Scraping)成为了获取数据的重要工具。Python 以其简单易用的特性,成为了网络爬虫开发的首选语言。本文将详细介绍如何使用 Python …

【抖音】a_bogus参数逆向分析

抖音回复评论: 点击——展开xxx条回复﹀就会出现 https://www.douyin.com/aweme/v1/web/comment/list/reply 直接搜又搜不到 分析调用堆栈 可以看到这个栈是有请求相关的数据的 上面一个栈 所以就是在bdms.js里面生成的 就在这里打上日志断点:“T…

基于SpringBoot的宠物健康咨询系统的设计与实现

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理,然而,随着近些年信息技术的迅猛发展,让许多比较老套的信息管理模式进行了更新迭代,宠物健康知识信息因为其管理内容繁杂,管理数量繁多导致手工进行处理不…