如何在Reveal.js的Robot Lung主题中为每页幻灯片自定义.line颜色？

为什么Slide States不生效？ #

Robot Lung主题中.line元素的默认CSS选择器优先级较高，超过了Slide States添加的[data-state]属性选择器，导致自定义样式无法覆盖主题原有样式。下面提供两种可行的实现方案：

方法一：自定义幻灯片类 + CSS 覆盖 #

这是最直接的静态方案，通过给幻灯片添加专属类，配合高优先级CSS选择器实现颜色自定义：

1. 给每张幻灯片<section>添加自定义类，比如：

<section class="pink-line">
  <!-- 幻灯片内容 -->
</section>
<section class="yellow-line">
  <!-- 幻灯片内容 -->
</section>

2. 在主题CSS之后加载自定义CSS，确保样式优先级足够：

/* 第1张幻灯片：粉色.line */
.reveal .slides section.pink-line .line {
  background-color: #ff6b9d !important; /* 若主题样式优先级仍过高，可加!important兜底 */
}

/* 第2张幻灯片：黄色.line */
.reveal .slides section.yellow-line .line {
  background-color: #ffd166 !important;
}

/* 可继续添加更多幻灯片的颜色规则 */
.reveal .slides section.green-line .line {
  background-color: #06d6a0 !important;
}

方法二：利用Reveal.js幻灯片切换事件动态修改 #

如果幻灯片数量较多，不想逐个加类，可以用JS监听幻灯片切换事件，根据索引动态设置颜色：

1. 在Reveal初始化完成后，绑定slidechanged事件：

Reveal.initialize({
  // 你的Reveal配置项
  theme: 'robot-lung'
});

// 监听幻灯片切换事件
Reveal.on('slidechanged', function(event) {
  // 获取当前幻灯片的水平索引（从0开始计数）
  const slideIndex = event.indexh;
  // 定义颜色数组，索引对应幻灯片顺序
  const lineColorMap = [
    '#ff6b9d',   // 第1张：粉色
    '#ffd166',   // 第2张：黄色
    '#06d6a0',   // 第3张：绿色
    '#118ab2'    // 第4张：蓝色
  ];
  
  // 获取当前幻灯片内的.line元素
  const currentLine = event.currentSlide.querySelector('.line');
  if (currentLine && lineColorMap[slideIndex]) {
    // 直接修改行内样式，优先级最高
    currentLine.style.backgroundColor = lineColorMap[slideIndex];
  }
});

注意事项 #

• 自定义CSS务必放在Robot Lung主题CSS之后引入，确保样式能覆盖默认值；
• 若用JS方案，要确保代码在Reveal初始化之后执行，避免无法获取元素；
• 如果主题的.line元素有其他样式（如渐变、边框），可根据需求同步修改对应的CSS属性（比如background-image、border-color等）。

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