Bootstrap 4可以处理由Google的材料设计切换触发的明暗模式的自定义主题吗？

Question

我正在构建一个新的应用程序，我将通过创建自定义主题来修改一些引导UI元素，不仅包括颜色，还包括对UI元素和间距的修改。我是前端新手，我想知道引导程序是否可以处理明/暗主题AT与材料设计相同的方式，例如：

注意：我的后端开发人员正在使用PHP和Ajax，我们没有使用react / angular / view和那些新的javascript框架来构建前端。

我们是否期望这种方法存在很多问题/故障？

Answer 1

如果您只是将切换从一个css文件切换到另一个css文件，则不会出现任何问题或故障。

Answer 2

在这里你可以像（#left, #right, #body）一样使用jQuery元素选择器， 当客户点击特殊（主）按钮时。

然后将根据您的主题（亮/暗）更改背景。

Answer 3

自然不会。但是只要有一点JS / jQuery和一个黑暗的主题，您就可以实现。 参见Guide to Dark Mode and Bootstrap

但是，在您提供主要的浅色主题和次要的深色主题并且用户偏爱深色的情况下（如您所问的），问题就出现了-当页面加载时，它将先加载默认值（浅色），然后交换为黑暗-产生“闪光”。使交换机适应服务器端（PHP）可能会修复Flash，但这需要大量工作来交换这两个主题。

但是，根据UX原理，如果浏览器支持prefers-color-scheme媒体查询，则切换按钮应该不可用，因为浏览器或用户操作系统将指示用户偏好。