时间戳

首页 > 解决方案 > 如何为 CSS 文件中的所有类指定一个伞类？

css - 如何为 CSS 文件中的所有类指定一个伞类？

问题描述

为不精确的标题道歉，但我不确定该用什么词来问我的问题。

我正在尝试在 React 应用程序上添加一个切换以允许多个主题（深色模式、浅色模式）。经过一番谷歌搜索后，看起来最好的方法是从 CSS 加载两个互补的主题。例如，我们可以：

<div class="a-nice-class">
   ...some nice sunny content
</div>
<div class="night a-nice-class">
   ...some lovely night-time content
</div>

夜间模式的 CSS 看起来像

.night h1, .night h2, .night div, .night textarea{
  background-color: black;
  color: white;
  transition: background-color 0.3s, color 0.3s;
}

我想为我的夜间和白天模式使用 Bootswatch CSS 主题。Bootswatch 主题可以使用 导入import "bootswatch/dist/flatly/bootstrap.min.css";，也可以通过下载并包含 CSS 来导入。

我想为每个主题下载 CSS，然后在 Darkly css 中重命名类，以使任何标记为“night”的 div 从 Darkly 而非 Flatly 主题中读取它们的格式。

在不进入 CSS 文件并将 .night 添加到所有类名的情况下，有没有办法指定Darkly.css文件中的所有内容也应该是一个.night类？

或者，如果有一种简单的方法可以为外部抓取的 bootswatch 主题切换夜间模式，请大喊：我还没有找到一个令人满意的。

谢谢

标签： cssreactjsreact-bootstrapbootswatch

解决方案

推荐阅读