使用CSS，我们可以使用 preferreds-color-scheme 媒体查询来检测暗模式。
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia
在 vue3 版本之前，我们复用组件（或者提取和重用多个组件之间的逻辑），通常有以下几种方式：
CSS媒体查询是任何响应式设计的核心成分。它们是将不同样式应用到不同上下文的好方法，无论它是基于视口大小、运动偏好、首选的配色方案、特定的交互，甚至是特定的设备，如打印机、电视和投影仪等。
在使用需要一定程度随机化的算法时，你经常会发现洗牌数组是一项非常必要的技能。以下代码段以复杂的方式对数组进行混洗。O(n log n)
响应式设计指的是根据屏幕视口尺寸的不同，对 Web 页面的布局、外观进行调整，以便更加有效地进行信息的展示。我们日常生活中接触的很多应用都遵循响应式的设计。
苹果的“暗黑模式”带来了全然一新的外观，它能使您的眼睛放松，并有助于您专心工作。暗黑模式使用一种较深的配色方案，这种配色作用于整个系统，现在大部分网站也加入了暗黑模式，包括 Tailwindcss、antd design 等都支持了暗黑模式，因此我们的网站也要适配系统皮肤。
暗黑模式实现，最初的设计，就是参考之前的主题模式。所谓多套主题/配色/皮肤，就是我们很常见的换肤功能。换肤简单的实现就是更换 css实现不同样式呈现不同肤色。
能在本文中出场的代码全部都经过了仔细的甄选，在文章发布前，50 人的团队对所有代码都进行了认真的检验，以确保其符合“杀手级”资格，本文的目的就是希望为开发者带来一些便利。
方式3：使用类名切换，通过对顶层节点设置不同的类名，然后定义不同类名的CSS样式，切换主题时修改类名即可
那么，我们自己的网站如何适配暗色/亮色模式呢？首先说一下最基础的媒体查询，然后带大家了解一下我的适配方案（纯JS、CSS和HTML的前端操作）。
如果系统设置了深色模式，H5页面不做相应的处理，会出现背景色冲突、深色文字显示异常，深色图标显示异常等一些显示上的问题。
大家对网站的自适应模式都已经清楚了，现在个人博客基本都兼容自适应代码，相比手机端的优势很明显，在PC端、手机端和IPAD端都采用同一套代码，不必再另外解析独立域名，有效避免了网页内容的重复，并能集中精力维护网页，对搜索引擎友好。但是近几年各大手机厂商逐渐开始注重深色方式或者说夜间模式，从而改善用户在环境光亮低时的阅读体验。很多手机APP应用都已经对夜间模式进行了支持，那么问题来了，对于手机网站来说，个人博客的网站能否支持自适应浅色模式和夜间模式呢？答案是当然可以啦！
可以看到实现的方式基本就是在浏览器本地存一个数据来标识当前处于什么模式，当然 github 也没有例外：
随着 iOS 13 的发布，深色模式（Dark Mode）越来越多地出现在大众的视野中，支持深色模式已经成为现代移动应用和网站的一个潮流，前段时间更是因为微信的适配再度引起热议。深色模式不仅可以大幅减少电量的消耗，减弱强光对比，还能提供更好的可视性和沉浸感。
JavaScript 中实现自动检测用户是否使用移动设备，并据此跳转到对应的手机移动网页，通常可以通过检查 navigator.userAgent 属性来识别用户代理字符串中包含的设备信息。以下是一个简单的示例，展示如何基于用户使用的浏览器类型进行判断并跳转：
夜间模式开关按钮：用来手动切换夜间模式的，会存储cookie。 自动夜间模式：当cookie为空时，浏览器时间大于22点小于6点时会自动进入夜间模式，并存储cookie。 后端配合：php判断是否有cookie，有的话直接输出夜间css，避免切换页面时网页闪烁。
Web API：https://developer.mozilla.org/zh-CN/docs/Web/API
随着前端更新，网站设计中，深色模式也成为了一种备受欢迎的设计趋势。可以帮助用户减少眼睛的负担，同时也更加适合在光线较暗的环境下使用。
将任何文本复制到剪贴板 navigator.clipboard.writeText。
这篇文章一共收集了12个在日常开发中非常常用的函数，或简单或复杂，但或多或少对大家都有所帮助，建议先收藏哦！ 01 【生成随机颜色】 你的网站是否需要生成随机颜色？下面一行代码就可以简单实现。 const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}` console.log(generateRandomHexColor()) 02 【数组重排序】 对数组的元素进行重新排序
下面是 30 行代码小魔术 JavaScript 代码，它们将使你的编程工作更轻松。
大佬弄的 这个实现了在没有暗黑模式的系统里的切换，如果像iOS或者macOS或者新的win10和安卓都实现了系统级别的暗黑模式。 如果还按照大佬的弄，就会造成在启用暗黑模式的系统中切换夜间/日间模式切反的情况，所以我才对其进行了修改。
英文 | https://medium.com/@amine.elwer/top-15-javascript-code-snippets-you-will-always-need-dbadade134ad
英文 | https://javascript.plainenglish.io/18-killer-javascript-one-liners-%EF%B8%8F-b11f0c796024
简单的工作绝不复杂化,复杂的代码大多都能简化。今天大师兄就公开珍藏收集已久的单行代码绝技
借助navigator.clipboard.writeText可以很容易的讲文本复制到剪贴板
为了提高你的 JavaScript 知识与技能，你应该了解一些JavaScript的单行代码技巧。
在过去的几年里，浏览器实现了各种功能，可以使用CSS、JavaScript或检查服务器端的首选项来响应web上的用户偏好。在本文中，将展示浏览器当前公开的用户偏好、处理它们的最佳方式，以及对未来的展望，以了解可能很快就会出现什么。
为了提高网站的用户体验，我们经常需要将内容复制到剪贴板，以便用户可以将其粘贴到指定位置。
只能说，实现 Dark Mode 的尽头是手写。 手机 QQ 最近火急火燎地整改，暗黑模式的支持就是其中的一个整改项。由于腾讯课堂在手机 QQ 有一个常驻入口，因此我们也要按照它们的要求实现真正意义上的 dark mode 支持 (而不是目前手机 QQ 强制给加的一层灰色蒙层)。 大学时候有个项目也是自己设计和实现的 dark mode 支持，当时是手写的，依稀记得后面从哪些文章里看到说可以一行代码实现暗黑模式云云，于是企图在这次实践过程中应用下这些奇技淫巧，然而经过一天的实践，我发现这些方法有绕不过的坑，
在我们的开发人员工作流程中，我们经常会遇到具有挑战性的问题，这些问题可能只需要几行代码就可以解决。在本文中，我试图编译有用的片段，这些片段可能会在您处理 URL、DOM、事件、日期、用户首选项等时为您提供帮助。
英文 | https://javascript.plainenglish.io/25-killer-javascript-one-liners-thatll-make-you-look-like-a-pro-d43f08529404
自定义Hook不仅能让你的代码更加简洁和高效，还能让你更容易地管理复杂的逻辑。在实际项目中，我们经常会遇到一些重复的代码和逻辑，而自定义Hook正是解决这些问题的最佳方案。
类似于我们检查日期是否与当前日期相对应的情况。在这种情况下，我们获取年份并进行比较。
今天这篇文章，我想跟大家分享一些强大的 JavaScript 单行代码，因为使用这些单行代码可以帮助你提升工作效率，在这篇文章中，我总结了30个实用的代码技巧，希望这些代码技巧对你有用。
先来介绍下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。
先来介绍下 media，确切的说应该是 CSS media queries（CSS 媒体查询），媒体查询包含了一个媒体类型和至少一个使用如宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3 加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。 那么该怎么定义 media 呢，看下面的代码，你肯定能猜出个大概。 <link rel="stylesheet" media="(max-width: 800px)" href="examp
在 Nuxt3 中要实现暗黑模式，需要用到一个库：color-mode，它可以帮助我们很轻易地实现暗黑模式切换。
react-ui-mode-cc 是融合响应式设计的 React 版实现，基于 create-react-library[1]构建，使用 云开发 CloudBase Framework[2]部署到腾讯云静态网站托管。
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
无论你可能会怎么想，目前，在浏览器里可靠地检测当前的设备是否有一个触摸屏是不可能的。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
