在 React 中使用 Less + CSS Modules 切换主题

Question

在我的项目中，我使用带有 Less 的 CSS 模块，这意味着我可以两全其美。

我的src 文件夹如下所示：

components/
    [all components]
theme/
    themes/
        lightTheme.less
        darkTheme.less
    palette.less

palette.less：

@import './themes/lightTheme.less';

然后，在每个想要使用主题颜色的组件中，我都会这样做：

component.module.less：

@import '../../theme/palette.less';

.element {
    background-color: @primary;
}

这个结构让我可以编辑palette.less 来导入我想使用的主题。问题是我想让用户自己选择他们喜欢的主题。主题应该可以在运行时切换，这意味着我需要编译两个主题。

---

我认为完美的解决方案是这样的：

app.less

body {
    @theme: @light-theme;

    &.dark-theme {
        @theme: @dark-theme;
    }
}

然后以某种方式在每个组件中导入这个@theme 变量并从中读取属性（即@theme[primary]）。

不幸的是，Less 变量的作用域不能像这样工作。

---

我对任何使用 Less 模块的解决方案持开放态度。

谢谢！

Answer 1

我知道您可能一直在寻找使用 Less / CSS 模块的解决方案，但很可能您的情况可以仅通过使用 css 变量来解决（正如 Morpheus 对您的问题所评论的那样）。

它是如何工作的？

您必须确保所有样式不使用硬编码值，即，而不是：

.awesome-div {
  background-color: #fefefe;
}

你会：

:root {
  --awesome-color: #fefefe;
}

.awesome-div {
  background-color: var(--awesome-color);
}

明暗交替

在这种方法中有两种改变主题的方法：

• 在 React 中使用 vanilla Js 代码更新 :root CSS 元素，查看此 codepen 了解更多信息；
• 只需在其 component.css 文件中加载包含所有新 :root 变量的组件；

在 React 中（在原版 CSS 中也是如此），您可以轻松地让多个组件/元素在其 .css 文件中声明自己的 :root。

此外，任何新的:root 都将覆盖之前:root 的冲突值。例如，如果在 app.css 文件中我们有 :root { --color: red; }，并且在加载另一个组件时，例如组件 A，在 component_a.css 中我们有相同的变量被覆盖，例如:root { --color: blue; } 在我们的浏览器中呈现的那个将是来自组件 A 的那个。

按照这个逻辑，你可以有一个虚拟组件，它什么都不做，什么也不渲染，但是在这个 component.js 文件中你导入一个主题的 .css，例如：

import './light.css'; // suppose this is the light-theme dummy component

在您的应用中切换主题时，您只需从场景中移除虚拟组件并调用另一个。

我对 codepen 不太熟悉，无法在此处为您提供一个包含导入/模块的示例，但我希望上述解释可以让您了解我的意思。不过，这里是我打算演示的简短伪代码：

loadTheme() {
  if (this.state.theme === 'dark') return <LightTheme />;
  if (this.state.theme === 'user-3232') return <UserTheme />;
  return <DarkTheme />;
}

render() {
  return (
    <App>
      {this.loadTheme()}
      <OtherContent>
    </App>
  );
}

Answer 2

查看 Styled 组件，它可以做到这一点。

https://www.npmjs.com/package/styled-components

https://styled-components.com/docs/advanced#theming

我自己在我的一个应用程序中作为复活节彩蛋做的，所以我确信它有效。不幸的是，它已关闭，因此我无法公开向您展示代码。