如何自定义mix-blend-mode变色效果的配色方案？

问题背景 #

现有点击右上角圆形按钮触发的主题切换效果：圆形展开覆盖全屏切换深色背景，文字和按钮通过mix-blend-mode: difference自动适配颜色，方形元素通过mix-blend-mode: lighten显示。需求是自定义亮色模式和深色模式下的所有配色，摆脱混合模式的自动计算限制。

实现思路 #

核心是通过切换根元素类名控制全局样式，保留原有的圆形展开动画，同时完全自定义各模式配色：

• 给body添加主题类（如.dark-theme），通过类名切换控制全局背景、文字、元素颜色
• 圆形展开元素仅作为视觉过渡，不依赖它影响其他元素颜色
• 为每个元素定义两种主题下的颜色，通过类名切换激活对应样式
• 控制方形元素的显示/隐藏，同时自定义其深色模式配色

修改后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Custom Theme Toggle</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet" />
</head>
<body>
  <div class="mode-toggle"></div>
  
  <div class="container">
    <div class="dark-mode-transition"></div>
  </div>

  <div class="content-to-appear"></div>

  <div class="hero">
    <h1>LOREM IPSUM LOREM LOREM LOREM</h1>
    <p class="test">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基础亮色模式样式 */
html,
body {
  font-family: 'Poppins', 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', 'sans-serif';
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff; /* 自定义亮色背景 */
  transition: background-color 0.3s ease;
}

/* 切换按钮 */
.mode-toggle {
  position: absolute;
  right: 50px;
  cursor: pointer;
  top: 50px;
  width: 30px;
  height: 30px;
  z-index: 20;
  transition: all 1s ease;
  border-radius: 50%;
  background-color: #db3069; /* 亮色模式按钮颜色 */
}

/* 圆形过渡动画容器 */
.container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 50px;
  top: 50px;
  height: 30px;
  width: 30px;
  z-index: 10;
}

/* 展开的圆形过渡元素 */
.dark-mode-transition {
  position: relative;
  transform: scale(0);
  height: 1000px;
  width: 1000px;
  border-radius: 50%;
  background-color: #161616; /* 深色过渡背景 */
  transition: transform 3s ease-in-out;
}
.dark-mode-transition.active {
  transform: scale(1);
}

/* 待显示的方形元素 */
.content-to-appear {
  position: absolute;
  right: 100px;
  bottom: 100px;
  width: 100px;
  height: 100px;
  background-color: transparent;
  opacity: 0;
  transition: all 0.5s ease;
}

/* 深色模式全局样式 */
body.dark-theme {
  background-color: #161616; /* 自定义深色背景 */
}
body.dark-theme .mode-toggle {
  background-color: #ffffff; /* 深色模式按钮颜色 */
}
body.dark-theme h1 {
  color: #db3069; /* 深色模式标题颜色 */
}
body.dark-theme .test {
  color: #9aa0de; /* 深色模式正文颜色 */
}
body.dark-theme .content-to-appear {
  background-color: #db3069; /* 自定义深色模式方形颜色 */
  opacity: 1;
}

/* 亮色模式文本样式 */
h1 {
  font-size: xx-large;
  color: #2d2d2d; /* 亮色模式标题颜色 */
  transition: color 0.3s ease;
}
.test {
  color: #555555; /* 亮色模式正文颜色 */
  transition: color 0.3s ease;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 50px 100px;
}

JavaScript

const modeToggle = document.querySelector('.mode-toggle');
const darkModeTransition = document.querySelector('.dark-mode-transition');
const body = document.body;

modeToggle.addEventListener('click', () => {
  // 切换过渡动画类
  darkModeTransition.classList.toggle('active');
  // 切换主题类
  body.classList.toggle('dark-theme');
  // 按钮自身动画（可选）
  modeToggle.classList.toggle('active');
  
  // 动画结束后重置过渡元素，避免影响后续交互
  setTimeout(() => {
    if (!darkModeTransition.classList.contains('active')) {
      darkModeTransition.style.transition = 'none';
      darkModeTransition.style.transform = 'scale(0)';
      setTimeout(() => {
        darkModeTransition.style.transition = 'transform 3s ease-in-out';
      }, 10);
    }
  }, 3000);
});

关键修改说明 #

1. 移除mix-blend-mode：所有元素颜色不再依赖混合模式，直接通过主题类定义固定值
2. 主题类全局控制：通过body.dark-theme统一管理深色模式下的所有样式，修改颜色只需调整对应CSS值
3. 独立过渡动画：圆形展开仅作为视觉过渡效果，不参与颜色计算，动画结束后自动重置状态
4. 完全自定义配色：可直接修改以下关键颜色值：
   • 亮色背景：body的background-color
   • 深色背景：body.dark-theme的background-color
   • 亮色文本：h1、.test的默认color
   • 深色文本：body.dark-theme h1、body.dark-theme .test的color
   • 方形深色颜色：body.dark-theme .content-to-appear的background-color

内容的提问来源于stack exchange，提问作者Joaquin Leimeter