网站深色模式按钮
选择两种主题的颜色。代码包含 CSS 变量、避免闪烁的脚本，以及带 aria-pressed 的无障碍按钮。
使用方法用一个按钮切换浅色和深色主题
1. No <head>, antes do CSS
2. CSS
3. 按钮和脚本，放在页面正文中
可用语言: 
广告
网站深色模式按钮: 用途
深色模式已成为手机上的默认设置，许多人希望网站也能跟随。这个生成器用 CSS 变量和 prefers-color-scheme 构建浅色和深色主题，让网站自动跟随系统，另外提供一个按钮，让用户只在你的网站上选择其他主题。
代码分为三部分：放在 head 中的一行，在页面显示前应用已保存的选择（避免错误主题的闪烁）；带 color-scheme 的 CSS，使输入框和滚动条跟着变化；以及带 aria-pressed 和太阳、月亮图标的按钮。
使用方法
- 选择浅色和深色主题的颜色。
- 在预览中测试按钮。
- 把那一行放进 head，把 CSS 和按钮放到合适的位置。
使用场景
- 博客和内容网站。
- 系统和后台面板。
- 开发者作品集。
常见问题
怎么避免加载时闪现浅色主题？
读取已保存选择的脚本必须在 head 中运行，早于页面显示。代码分成两部分提供：一行放在 head 中，按钮放在页面正文中。
color-scheme 有什么作用？
它告诉浏览器页面是浅色还是深色，这样浏览器也会调整滚动条、表单字段和默认背景。没有它，深色模式下白色的输入框会显得很突兀。
如果网站已经跟随系统，还需要按钮吗？
不是必需的：仅靠 prefers-color-scheme，网站就能跟随手机或电脑的主题。按钮适合那些想让你的网站使用与系统不同主题的人。
真的免费吗？
是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。