Mushroom卡片中primary-text-color失效问题分析与解决方案

问题背景

近期在Mushroom卡片项目中，用户报告了一个关于文本颜色显示的问题。具体表现为：使用card-mod自定义样式时，通过--primary-text-color变量设置的文本颜色不再生效，文本始终显示为白色。这一问题出现在Mushroom卡片3.4.0版本中，而回退到3.3.0版本则可以恢复正常。

问题原因分析

经过项目维护者的确认，这一变化是由于3.4.0版本中对主题变量进行了调整。新版本中，Mushroom卡片开始使用默认的tile card字体样式，这导致了一些CSS变量的变更。具体来说：

1. 原先使用的--primary-text-color变量已被弃用
2. 新的实现采用了--card-primary-color变量来控制主文本颜色
3. 这一变化是为了统一卡片样式并遵循新的设计规范

解决方案

对于遇到此问题的用户，可以采用以下解决方案：

1. 变量替换：将原有的--primary-text-color替换为--card-primary-color

card_mod:
  style: |
    ha-card {
      {% set state=states('input_boolean.example') %}
      {% if state=='on' %}
        --card-primary-color: red
      {% else %}
        --card-primary-color: green
      {% endif %}
    }

2. 版本回退：如果暂时不想修改代码，可以回退到3.3.0版本

技术建议

1. 样式变量检查：在使用card-mod自定义Mushroom卡片样式时，建议查阅最新版本的文档，确认当前支持的CSS变量

2. 响应式设计：在设置文本颜色的同时，可以考虑一并设置字体大小等属性，确保卡片整体样式协调

card_mod:
  style:
    mushroom-state-info $: |
      .container {
        --card-secondary-font-size: 14px;
        --card-primary-font-size: 16px;
      }
    .: |
      ha-card {
        --card-primary-color: var(--your-custom-color);
      }

3. 测试策略：在升级Mushroom卡片版本前，建议在测试环境中验证自定义样式的兼容性

总结

Mushroom卡片3.4.0版本的样式变量变更虽然带来了一定的兼容性问题，但也体现了项目向更加规范化的方向发展。开发者在使用第三方卡片和自定义样式时，应当关注项目的更新日志和变更说明，及时调整自己的实现方案。通过使用新的--card-primary-color变量，用户仍然可以实现丰富的文本颜色自定义效果。