在前端开发中，修改主题色方案通常可以通过以下几种方式实现：

1. CSS变量（CSS Custom Properties）

使用 CSS 的变量功能，由 var() 函数来获取值（比如： color: var(--text-color);），结合使用修改 html 或 body 上属性，在全局或局部范围内使用这些变量，通过修改变量的值来改变主题颜色。 如静态站点都是使用这种方案，如 MDN官网、VuePress 等。

全局变量 themes.css

/* 亮色调默认颜色 */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --button-bg-color: #dbd8d8;
}

/*  暗色调默认颜色 */
[data-theme="dark"] {
  --background-color: #333333;
  --text-color: #ffffff;
  --button-bg-color: #121212;
}

/*  自定义主题颜色 */
[data-theme="custom"] {
  --background-color: #e40c0c;
  --text-color: #ffffff;
  --button-bg-color: #121212;
}

变量引用 main.css

button {
  background-color: var(--button-bg-color);
}

设置主题 index.html

const theme = 'dark';
const body = document.querySelector("body");
body.classList.add(`root-${theme}`);

• 优点：
  • 灵活性高，可以在整个应用程序中定义和使用变量，可以动态修改主题色，实现即时切换效果。
  • 适用于单个应用程序或网站的主题修改，不需要额外的工具或依赖。
• 缺点：
  • 兼容性受限，低版本的浏览器可能不支持CSS变量，但现在项目一般只会要求主流浏览器了吧。

2. 预处理器（Preprocessor）

使用 CSS 预处理器如 Sass、Less 或 Stylus 等，可以定义变量来表示主题颜色，然后在样式表中使用这些变量来设置具体的颜色。通过修改变量的值，可以轻松地修改整个应用程序的主题色。 如 element ui、anted design 都是采取预处理器方式动态修改主题色。

主题 themes-light.scss

/* 亮色调默认颜色 */
.themes-light {
  $background-color: #ffffff;
  $text-color: #000000;
  $button-bg-color: #dbd8d8;
}

主题 themes-dark.scss

/*  暗色调默认颜色 */
.themes-dark {
  $background-color: #333333;
  $text-color: #ffffff;
  $button-bg-color: #121212;
}

主题 themes-custom.scss

/*  自定义主题颜色 */
.themes-custom {
  $background-color: #e40c0c;
  $text-color: #ffffff;
  $button-bg-color: #121212;
}

主题引用 main.css

/*  一次性引入全部主题 */
import "themes-light.scss";
import "themes-dark.scss";
import "themes-custom.scss";

button {
  background-color: $button-bg-color;
}

设置主题 index.html

const theme = 'dark';
const body = document.querySelector("body");
body.classList.add(`themes-${theme}`);

• 优点：
  • 提供了更强大的功能，例如变量、混合器等，可以更便捷地定义和修改主题色。
  • 可以根据需求轻松切换不同的主题样式文件。
• 缺点：
  • 需要额外学习和配置样式预处理器，增加了一些开发复杂性。
  • 需要编译预处理器的源代码，可能增加了一些构建步骤和性能开销。

3. CSS-in-JS 方案

CSS-in-JS 是一种在 JavaScript 中编写 CSS 样式的技术，它允许你在 JavaScript 代码中直接定义样式，并将其应用到组件中。这种方案的主要优点是可以实现组件级别的样式封装，避免全局样式污染，同时也可以更方便地实现动态主题切换和样式的条件渲染。

详细的 CSS-in-JS 简介

Ant Design 5.0 版本从使用了很久的 Less 切换到 CSS-in-JS 方案，当时引起很多人的讨论，大家都认为 CSS-in-JS 的方案增加了渲染任务，会影响组件的渲染性能。

详细内容可以查看 Ant Design 组件级别的 CSS-in-JS