用 CSS 实现自定义滚动条和高对比度模式
自定义主题的收尾部分往往是人们忘记的部分:滚动条、对比度,以及完全抽掉颜色的选项。本指南汇集了能把网站打磨成你真正乐于使用的 JustZix CSS 规则。
设计滚动条样式
默认滚动条可能与精心调校的深色主题相冲突。现代浏览器给你两种重新设计它样式的方式。两者都用,以获得完整覆盖。
html {
scrollbar-width: thin;
scrollbar-color: #4b5263 #1f232a;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #1f232a;
}
::-webkit-scrollbar-thumb {
background: #4b5263;
border-radius: 8px;
border: 3px solid #1f232a;
}
::-webkit-scrollbar-thumb:hover {
background: #5c6370;
}scrollbar-width 和 scrollbar-color 属性覆盖 Firefox;::-webkit-scrollbar 伪元素覆盖 Chrome、Edge 和 Opera。两者都包括,意味着你的规则在每个 JustZix 支持的浏览器里都显示正确。
真正的高对比度模式
对于低视力用户,或仅仅是明亮房间里的阅读,纯粹的对比度有帮助。这个配方强制使用接近黑色的背景、接近白色的文本和一个醒目的强调色。
html, body {
background: #000 !important;
color: #fff !important;
}
p, li, span, div, h1, h2, h3, h4, td, th {
color: #fff !important;
}
a, a:visited {
color: #ffe066 !important;
text-decoration: underline !important;
}
button, .btn {
background: #ffe066 !important;
color: #000 !important;
border: 2px solid #fff !important;
}黑底黄字是可用配色中对比度最高的搭配之一,也是一个由来已久的无障碍默认选项。给链接加下划线保证它们不依赖颜色就能被区分。
不重新上色也能提升对比度
如果你喜欢网站的调色板但它感觉发灰,就用滤镜推高对比度,而不是把一切重绘。
html {
filter: contrast(1.15) brightness(0.97);
}这只是一行代码,而且可逆——关掉 JustZix 规则,页面就恢复正常。把数值保持温和;任何超过 1.3 的值都会开始压垮细节。
灰度和减色模式
颜色可能分散注意力。一条灰度规则把它完全剥离,这对于专注或在不受颜色偏见影响下审阅布局非常棒。
html {
filter: grayscale(1);
}更想保持图片有颜色但让界面变淡?对所有东西应用灰度,然后恢复媒体。
html {
filter: grayscale(0.85);
}
img, video, picture, canvas {
filter: grayscale(0);
}尊重动效偏好
一个完整的无障碍主题也会让动画平静下来。对于任何要求其系统减少动效的人,这条规则干掉令人分心的动效。
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}组合起来
- 始终把 Webkit 和 Firefox 的滚动条属性配对,这样规则才跨浏览器。
- 基于滤镜的对比度和灰度都是一行代码且完全可逆——非常适合快速切换。
- 对于严肃的无障碍需求,用真实颜色重绘而不是滤镜;给链接加下划线。
- 把每种模式保存为它自己的 JustZix 规则,在适合的时刻启用对应的那一个。
这与通用深色模式和舒适阅读设置自然搭配。在我们的现成示例里找到更多即插即用配方,或者下载 JustZix,开始按你的方式给网络换主题。
为这篇文章评分
暂无评分 — 成为第一个。