Bootstrap 5和Jekyll中浅色和深色模式的实用指南

后端之巅
288 阅读8分钟

DZone>Web Dev Zone>Bootstrap 5和Jekyll的浅色和深色模式实用指南

Bootstrap 5和Jekyll的浅色和深色模式实用指南

为Bootstrap 5组件提供样式变体是困难的，但并非不可能。让我们来学习如何在你的Bootstrap 5 + Jekyll网站上实现浅色和深色模式。

Ayush Sharma user avatar通过

阿尤什-夏尔马

-

1月31日，22 - Web Dev Zone -教程

喜欢 (1)

评论

保存

鸣叫

366次浏览

加入DZone社区，获得完整的会员体验。

免费加入

为我的副业添加明暗模式是一个有趣的旅程。我特别喜欢整个过程的直观性。prefers-color-scheme CSS属性包含了用户的颜色方案--浅色或深色。然后我们为这两种模式定义SASS或CSS样式，浏览器会应用用户想要的样式。这就是了!从操作系统到浏览器再到网站的无缝流动对用户和开发者来说都是巨大的胜利。

在对Fediverse进行修补后，我决定在这个网站上也添加明暗模式。我开始在网上研究如何最好地处理这个问题。这个GitHub线程显示了该功能的当前进展。这个深入的POC展示了这个过程是多么具有挑战性。

挑战

最大的挑战是SASS和CSS有时不能相互配合。

让我解释一下。

从我之前关于浅色和深色主题的文章来看，要创建这两种风格，我们需要像这样定义CSS。

/* Light mode */
:root {
   --body-bg: #FFFFFF;
   --body-color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
   :root {
       --body-bg: #000000;
       --body-color: #FFFFFF;
   }
}

这就很简单了。定义好样式后，我们在CSS中使用var(--body-bg) 和var(--body-color) 。这将导致颜色根据prefers-color-scheme 的值进行切换。

Bootstrap 5使用Sass来定义颜色值。我的网站在_variables.scss 中的颜色方案看起来是这样的。

// User-defined colors
$my-link-color: #FFCCBB !default;
$my-text-color: #E2E8E4 !default;
$my-bg-color: #303C6C;

现在的解决方案似乎很明显，对吗？我们可以把prefers-color-scheme 和上面的变量结合起来，然后就可以了。

// User-defined colors
:root {
 --my-link-color: #FFCCBB;
 --my-text-color: #E2E8E4;
 --my-bg-color: #303C6C;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
 :root {
 --my-link-color: #FF0000;
 --my-text-color: #FFFFFF;
 --my-bg-color: #000000;
  }
}

此外，我们需要在_variables.scss 中用-- 的变体替换$ 的值。在做出改变并运行jekyll build ，我们得到了以下结果。

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss':
                    Error: argument `$color2` of `mix($color1, $color2, $weight: 50%)` must be a color on line 161:11 of _sass/_functions.scss, in function `mix` from line 161:11 of _sass/_functions.scss, in function `shade-color` from line 166:27 of _sass/_functions.scss, in function `if` from line 166:11 of _sass/_functions.scss, in function `shift-color` from line 309:43 of _sass/_variables.scss from line 11:9 of _sass/bootstrap.scss from line 1:9 of stdin >> @return mix(black, $color, $weight); ----------^ 
             Error: Error: argument `$color2` of `mix($color1, $color2, $weight: 50%)` must be a color on line 161:11 of _sass/_functions.scss, in function `mix` from line 161:11 of _sass/_functions.scss, in function `shade-color` from line 166:27 of _sass/_functions.scss, in function `if` from line 166:11 of _sass/_functions.scss, in function `shift-color` from line 309:43 of _sass/_variables.scss from line 11:9 of _sass/bootstrap.scss from line 1:9 of stdin >> @return mix(black, $color, $weight); ----------^ 
             Error: Run jekyll build --trace for more information.

这个错误意味着Bootstrap混合器希望颜色值是，嗯，颜色值。而不是CSS变量。从这里，我们可以深入到Bootstrap的代码中去重写这个混合器。但我们最终会重写大部分的Bootstrap代码来使其工作。这一页描述了我们在这一点上的大部分选择。但我能够用一个更简单的方法来做。

由于我没有使用Bootstrap的全部功能，我能够用prefers-color-scheme 、一些CSS重写和一点点代码重复的组合来增加明暗模式。

第1步：将演示与结构分开

在应用新的样式来处理明暗模式之前，需要对HTML和CSS进行一些清理工作。

第一步是确保所有表现层的东西都在CSS中，而不是在HTML中。演示标记（CSS）应该始终与页面结构（HTML）分开。但一个网站的源代码会随着时间的推移而变得混乱不堪。如果你的颜色类已经被分离到CSS中，你可以跳过这一步。

我发现我的HTML代码中充斥着Bootstrap的颜色类。某些divs和footers在HTML中使用text-light 、text-dark 、bg-light 和bg-dark 。由于处理浅色和深色主题需要依靠CSS，这些颜色类必须被删除。所以我把它们从HTML中移到我的自定义SASS文件中。

我保留了上下文的颜色类（bg-primary,bg-warning,text-muted, 等等）原样。我为我的浅色和深色主题挑选的颜色不会与它们发生干涉。请确保你的主题颜色与上下文颜色配合得很好。否则，你应该把它们也移到CSS中。

到目前为止，我已经在这个网站上写了100多篇文章。所以我不得不在_posts/ 目录下扫描我所有的文章，猎取颜色类。像上面的步骤一样，确保将所有的颜色类移到CSS中。别忘了也要检查Jekyll的collections 和pages 。

第2步：尽可能地合并样式

巩固和重复使用样式元素将确保我们有更少的担心。我在主页上的Projects 和Featured Writing 部分显示的是卡片式的布局。这些都是使用他们自己的自定义CSS样式。我重新设计了它们的样式，使之与文章链接相匹配，现在我就不用担心了。

还有其他几个元素也在使用自己的样式。我没有重新设计它们，而是选择删除它们。

例如，页脚使用了它自己的背景颜色。这就需要为一个浅色和深色的主题提供两种不同的颜色。我选择从页脚移除背景，以使迁移工作更容易。现在，页脚采用了背景的颜色。

如果你的网站使用了太多的样式，为谨慎起见，在迁移时将它们删除。在迁移到浅色/深色主题完成后，你可以把它们加回来。

我们的目的是希望保持迁移的简单性，如果需要的话，以后再添加新的样式。

第3步：添加浅色和深色配色

随着清理工作的完成，我们现在可以专注于添加浅色和深色主题的样式元素。我们定义新的颜色样式，并将它们应用到HTML元素中。我选择从下面开始。

  1. --body-bg 为背景色。
  2. --body-color 主体/文本颜色。
  3. --body-link-color 链接的颜色。
  4. --card-bg 为Bootstrap卡片的背景颜色。
:root {
 --body-bg: #EEE2DC;
 --body-color: #AC3B61;
 --body-link-color: #AC3B61;
 --card-bg: #EDC7B7;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
 :root {
 --body-bg: #303C6C;
 --body-color: #E2E8E4;
 --body-link-color: #FFCCBB;
 --card-bg: #212529;
  }
}

在确定了颜色后，我改变了CSS以使用新的颜色。例如，body 元素现在看起来像这样。

body {
 background-color: var(--body-bg);
 color: var(--body-color) !important;
}

你可以在GitLab上查看其余的CSS修改。

如果Bootstrap 5是与你的Jekyll源代码一起编译的，而不是从CDN上下载的，你可以覆盖它的默认值。这对于简化你需要处理的自定义样式可能是有意义的。例如，关闭链接装饰使我的生活更轻松。

$link-hover-decoration: none !default;

第四步：导航栏切换器

最后但并非最不重要的是：navbar toggler。在Bootstrap 5中，navbar-light 和navbar-dark 控制切换器的颜色。这些都是在主nav 元素中与.navbar 一起定义的。由于我们不再在HTML中硬编码颜色类，我们需要自己复制CSS。所以我扩展了默认的Sass，并添加了我的主题颜色。

.navbar-toggler {
  @extend .navbar-toggler;
  color: var(--text-color);
  border-color: var(--text-color);
}

.navbar-toggler-icon {
  @extend .navbar-toggler-icon;
  background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>"));
}

上面的代码是默认的Bootstrap 5 toggler的CSS代码，有一些小改动。这里有一点需要注意。对于toggler图标，我硬编码为stroke='#000000' ，因为黑色与我的主题颜色搭配。你可能需要更有创意地挑选颜色方案，以便在全局范围内工作良好。

就这样吧!浅色和深色模式现在可以如期工作了

总结

至少可以说，Bootstrap 5很复杂。在用你的自定义样式覆盖它时，有很多事情需要考虑。为每个Bootstrap 5组件提供浅色和深色的变体是很困难的。但如果你没有太多的组件需要处理，这也是可能的。

通过确保标记保持在Sass/CSS中，重复使用样式，并覆盖一些Bootstrap 5的默认值，就有可能实现浅色和深色模式。这不是一个全面的方法，但它是实用的。在Bootstrap 5决定提供这个功能之前，它是可以使用的。

我希望这能给你更多实用的想法，让你知道如何为自己的网站添加明暗主题。如果你用自己的CSS魔法找到了更好的方法，别忘了在社区里分享。

编码愉快 :)

主题。

webdev, webdev教程, jekyll, bootstrap, 响应式设计, 可访问性, 前台, 静态网页设计, 静态网站

经Ayush Sharma, DZone MVB许可发表于DZone。点击这里查看原文。

DZone贡献者所表达的观点属于他们自己。

DZone上的热门文章

评论

网络开发 合作伙伴资源

avatar
文章
阅读
粉丝