【发布时间】：2021-09-13 05:41:33
【问题描述】：
我在 Bootstrap 4 上，使用浅色 .png 图像作为导航栏和正文的背景，而页脚区域为深色，文本颜色为灰白色。默认文本颜色为黑色，因为背景图像为浅色。
当用户使用深色主题访问网站时，事情会变得很糟糕。深色主题上的文本颜色变为浅色，而背景图像保持为浅色，使文本无法阅读。
请参阅下面浅色和深色主题的文本演示：
默认（浅色）主题上的文字
深色主题上的文字
无论用户的主题如何，我能否保持我的文本颜色不受影响？提前致谢！
【问题讨论】：
-
您能否提供更多关于访问者如何使用“深色主题”的信息？ Chrome 可以选择对 Web 内容强制使用深色模式，而 Windows 有 强制颜色模式，例如覆盖 CSS 颜色的 Windows 高对比度，但通常最好不要尝试覆盖这些设置，因为用户可能会这样做这样做是有原因的。另一个选项是让用户将他们的系统设置为暗模式。您可以在 CSS 或 JavaScript 中使用媒体查询
@media (prefers-color-scheme: dark)检测到这一点，然后根据需要更改颜色和背景图像。
标签： css bootstrap-4 browser accessibility darkmode