css - 在 React 中使用 Less + CSS 模块切换主题

Question

在我的元素中，我使用了 CSS Modules with Less，这意味着我可以两全其美。

我的 src 文件夹看起来像这样:

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

调色板.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 模块的解决方案持开放态度。

谢谢!

Answer 1

我知道您可能正在寻找使用 Less/CSS 模块的解决方案，但您的情况很可能只能通过使用 css 变量来解决(正如 Morpheus 对您的问题的评论)。

它是如何工作的？

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

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

你会:

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

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

明暗变化

此方法中有两种更改主题的方法:

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

在 React 中(也在普通 CSS 中)，你可以轻松地让多个组件/元素声明自己的 :root在他们的 .css 文件中。

此外，任何新的 :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>
  );
}