Drupal Twig模板中如何动态设置按钮hover状态颜色

优先选纯CSS实现，不需要写JS，无样式闪烁、性能更好，适配绝大多数场景，具体操作如下：

1. Twig模板层改造 #

把你拿到的动态颜色值node_color定义为CSS自定义属性，挂到按钮元素或者按钮和标题共用的父容器上，方便后续所有需要用主题色的元素调用，示例代码：

{# 方式1：直接挂在按钮上，适合只有按钮用这个hover色的场景 #}
<a href="/button-link" class="theme-btn" style="--hover-color: {{ node_color|e('css') }};">
  按钮文字
</a>

{# 方式2：挂在公共父容器上，标题、按钮、其他装饰元素都能复用这个颜色 #}
<div class="node-card" style="--theme-color: {{ node_color|e('css') }};">
  <p style="color: {{ node_color }}">{{ content.field_formated_title.0 }}</p>
  <a href="/button-link" class="theme-btn">按钮文字</a>
</div>

注意：给node_color加|e('css')转义过滤器，避免特殊字符导致样式注入问题，是Twig里输出CSS值的标准安全写法。

2. 写对应CSS样式 #

在主题的自定义CSS文件里，直接调用刚才定义的CSS变量设置hover状态样式即可，不管后台给当前节点配置的是什么颜色，都会自动生效：

.theme-btn {
  /* 按钮默认样式按你的设计稿写就行 */
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}
.theme-btn:hover {
  /* hover状态直接读取动态注入的颜色变量，可以设置文字、边框、背景任意属性 */
  color: #ffffff;
  background: var(--hover-color);
  border-color: var(--hover-color);
}

如果要做更柔和的效果，还可以用color-mix把主题色和白色/黑色混合做透明度、深浅变化，不需要额外处理色值。

为什么不推荐JS方案 #

JS实现需要等待DOM加载完成后再读取色值、绑定hover事件，很容易出现鼠标移上去先显示默认样式、过几十毫秒才切到配置色的闪烁问题，维护成本也更高。除非你需要兼容IE11这类完全不支持CSS自定义属性的古董浏览器，否则完全没必要用JS。

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