Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >仅使用HTML和CSS的亮暗模式按钮切换

仅使用HTML和CSS的亮暗模式按钮切换

作者头像

海拥

发布于 2021-08-23 09:35:37

发布于 2021-08-23 09:35:37

3.3K00

代码可运行

举报

文章被收录于专栏：全栈技术全栈技术

运行总次数：0

代码可运行

建立仅html和css的亮暗模式切换的快速指南。文章末尾给出了完整代码

演示效果：

使用css，html我们将建立一个按钮，该按钮：

light-mode和dark-mode之间的变化
默认为用户首选的配色方案
更改标签以反映用户的首选配色方案。

为什么没有JavaScript？

我的目标之一是使每个工具都可以不使用javascript，以一定程度上简化代码，同时也是个挑战。

我需要一种dark-mode 无需javascript进行切换的方法，同时仍然默认为visitor preferred-color-scheme。

这是我的解决方案，针对本教程进行了简化：

怎么运行的：

大多数dark-mode切换按钮的工作方式是更改标签上的属性，然后在CSS中定位该属性。像这样：

<body class="dark-mode">
    <!-- Site Content -->
</b

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/03/15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

仅使用HTML和CSS的亮暗模式按钮切换

css javascript html

我的目标之一是使每个工具都可以不使用javascript，以一定程度上简化代码，同时也是个挑战。

鲸落c

2022/11/14

4K0

仅使用HTML和CSS的亮暗模式按钮切换

网站如何适配暗色模式并实现手动、自动切换

html html5 javascript css 网站建设

那么，我们自己的网站如何适配暗色/亮色模式呢？首先说一下最基础的媒体查询，然后带大家了解一下我的适配方案（纯JS、CSS和HTML的前端操作）。

Mintimate

2021/02/01

9K0

网站如何适配暗色模式并实现手动、自动切换

Electron入门教程4 —— 切换应用的主题

如果您想要手动在亮/暗模式之间切换，您可以通过在nativeTheme模块的themeSource属性中设置所需的模式来做到这一点。此属性的值将传播到您的渲染进程。任何与prefers-color-scheme相关的CSS规则都将相应地更新。

害恶细君

2022/11/22

9340

Electron入门教程4 —— 切换应用的主题

Nuxt3在使用Tailwindcss情况下，如何优雅实现深色模式切换？

nuxtjs3 ssr tailwind-css 前端 node.js

随着前端更新，网站设计中，深色模式也成为了一种备受欢迎的设计趋势。可以帮助用户减少眼睛的负担，同时也更加适合在光线较暗的环境下使用。

Mintimate

2023/07/31

1.9K0

Nuxt3在使用Tailwindcss情况下，如何优雅实现深色模式切换？

夜幕下的代码旋律：Vue 黑暗模式的优雅实现

腾讯技术创作特训营S8

在程序员的世界里，有一条不成文的规则：越是深夜，代码写得越顺手。可是，长期被刺眼的白色屏幕闪瞎双眼，不仅伤害了视力，还影响了编程灵感。于是，黑暗模式就像一位救星，在某个寂静的深夜悄然降临。

繁依Fanyi

2024/08/12

4280

深入了解CSS颜色架构：提升你的网页设计技巧

css 变量技巧架构设计

快来免费体验ChatGpt plus版本的，我们出的钱体验地址:https://chat.waixingyun.cn 可以加入网站底部技术群，一起找bug，另外新版作图神器已上线 https://cube.waixingyun.cn/home

前端小智@大迁世界

2023/07/09

3250

深入了解CSS颜色架构：提升你的网页设计技巧

客户端开发（Electron）主题切换

渲染 javascript electron android 网络安全

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～ Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验。前情概要：上一篇通过快速入门我们搭建了最基础的HelloWorld模型，我们接下来就要在这

前端小鑫同学

2022/12/26

1.3K0

CSS 3.0的过滤属性实现黑暗模式

现在很多的网站都喜欢采用黑暗模式，毕竟这种界面看起来逼格比较高端，比如下面这样的效果：

越陌度阡

2020/11/26

5380

CSS 3.0的过滤属性实现黑暗模式

一步到位：三行CSS代码轻松实现全网站暗黑模式

css 网站操作系统浏览器系统

在另一篇博文中，Mads Stoumann详细介绍了如何使用SVG和CSS重新创建Apple的暗黑模式图标。这证明了他在此领域的深厚技术和创新能力。

前端小智@大迁世界

2023/05/23

1.8K0

一步到位：三行CSS代码轻松实现全网站暗黑模式

如何在网页设计中实现深色模式：增强用户体验

用户体验网站变量配色设计

近年来，深色模式已成为网页设计的主要趋势，以其优雅的外观吸引访问者，并为传统的浅色主题界面带来了可喜的变化。深色模式在各种数字平台上变得越来越流行，包括操作系统、移动应用程序和网站。但这不仅仅是一种趋势；这是一个将持续存在的设计决策。

哈德森sir

2024/05/16

2900

如何在网页设计中实现深色模式：增强用户体验

万字长文助你搞懂现代网页开发中常见的10种渲染模式

网站渲染服务器开发框架

近年来，网络开发的迅速演变，尤其是在前端开发领域。这种转变主要归功于无数涌现的框架和技术，它们旨在简化和增强构建引人入胜的用户界面的过程。然而，由于现有框架的丰富多样以及不断涌现的新框架，跟上前端趋势已成为一项艰巨的任务。对于新手来说，很容易感到不知所措，仿佛迷失在广阔的选择海洋中。

前端达人

2023/10/25

4600

万字长文助你搞懂现代网页开发中常见的10种渲染模式

实现用户自定义主题深浅模式浏览站点

存储变量配色配置系统

如今大部的网站都实现了深浅主题2种不同模式的配色，比如说程序员大多喜欢深色模式，或许是需要长时间使用电脑，该模式能够一定程度上保护视力。从表面现象上来看，实现这一功能需要 CSS 和 JavaScript 两者搭配着一起使用，但当深入以后发现有些没料想的事情，且听我慢慢叙说。

凡梦星尘

2024/11/20

710

实现用户自定义主题深浅模式浏览站点

CSS变量实现暗黑模式，我的小铺页面已经支持

最近微信被苹果逼的开发了暗黑模式，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何实现一个自动的 CSS 暗模式，根据你的访客的主题来改变。

张张

2020/03/17

1.7K0

CSS变量实现暗黑模式，我的小铺页面已经支持

关于前端主题切换的思考和现代前端样式的解决方案落地

编程算法 css 网站 html apache

网站或者应用一键切换主题（简称：换肤）功能，对每个前端开发者来说已经非常常见了，通常是一深一浅，或自由组合衍生出众多主题，或任意主题，这时候，设计一个工程化主题切换功能，并梳理现代前端样式的解决方案显得尤为重要。

ConardLi

2023/01/09

1.6K0

关于前端主题切换的思考和现代前端样式的解决方案落地

H5 项目如何适配暗黑模式

css html javascript ios html5

如果系统设置了深色模式，H5页面不做相应的处理，会出现背景色冲突、深色文字显示异常，深色图标显示异常等一些显示上的问题。

@超人

2021/07/05

2.6K0

js检测夜晚（dark）模式

使用CSS，我们可以使用 preferreds-color-scheme 媒体查询来检测暗模式。

IT工作者

2022/01/15

2.8K0

使用 React hooks 监听系统的暗黑模式

javascript 网站腾讯云开发者社区 css

苹果的“暗黑模式”带来了全然一新的外观，它能使您的眼睛放松，并有助于您专心工作。暗黑模式使用一种较深的配色方案，这种配色作用于整个系统，现在大部分网站也加入了暗黑模式，包括 Tailwindcss、antd design 等都支持了暗黑模式，因此我们的网站也要适配系统皮肤。

狂奔滴小马

2022/03/30

1K0

使用 React hooks 监听系统的暗黑模式

7个能提高你生产力的隐藏Chrome DevTools功能

开发人员工具对于软件开发是必不可少的。我们需要它们来开发、测试和调试我们的工作。作为web应用程序开发人员，您使用Chrome DevTools的几率非常高。

张张

2020/04/02

1.2K0

7个能提高你生产力的隐藏Chrome DevTools功能

如何在CSS中使用变量

css 编程算法 https javascript 网络安全

原文链接：https://www.sitepoint.com/how-to-use-variables-in-css/[1]

chuckQu

2022/09/20

2.9K0

DarkMode(2)：深色模式解决方案——css颜色变量实现Dark Mode

暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。

周陆军

2020/12/11

3.5K0

相关推荐

仅使用HTML和CSS的亮暗模式按钮切换

更多 >

LV.4

这个人很懒，什么都没有留下～

作者相关精选

换一批

目录

为什么没有JavaScript？

怎么运行的：

加入讨论

的问答专区 >

用户114052110

相关课程

一站式学习中心 >

轻量应用构建训练营

轻量应用服务器

微信小程序直播电商开发实践_《锋巢直播》

Serverless 容器服务

云数据库 SQL Server

小程序·云直播

即时通信 IM

本文部分代码块支持一键运行，欢迎体验

本文部分代码块支持一键运行，欢迎体验