Bootstrap主题自定义：如何用SCSS变量设置文本颜色

我正在构建Bootstrap主题，已给HTML元素设置data-bs-theme="corporate"，希望通过SCSS变量$textColor来定义文本框输入内容的颜色，不想硬编码颜色值——毕竟后续还要基于这个颜色生成阴影，而且颜色还没被营销部门最终确定。但试了两种写法都无效，只有硬编码十六进制颜色能正常工作：

$header-blue:  #1D46F3;
$textColor: #002579;

[data-bs-theme="corporate"] {
  --bs-body-color: #{to-rgb($textColor)};  /* 无效 */
  --bs-body-color: $textColor;  /* 无效 */
  --bs-body-color: #002579;  /* 有效 */

  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-white);
  --bs-body-bg-rgb: #{to-rgb($white)};
  --bs-emphasis-color:#{to-rgb($textColor)};
  --bs-table-color:#{to-rgb($textColor)};
  --bs-table-color-state:#{to-rgb($textColor)};
}

问题原因 #

CSS自定义属性（也就是--bs-*这类变量）需要的是合法的CSS颜色值字符串：

• 直接写$textColor时，SCSS不会将其编译为对应的颜色值，而是原样保留成字符串$textColor，CSS无法识别。
• 使用#{to-rgb($textColor)}会输出0,37,121这种纯RGB数值，但缺少rgb()包裹，同样不是合法的颜色格式。

正确写法 #

你可以选择以下两种方式来正确插值SCSS变量到CSS自定义属性中：

1. 直接插值十六进制颜色
   这种写法会把SCSS变量的十六进制值直接编译进CSS自定义属性，效果和硬编码完全一致，但保留了变量的灵活性：

   --bs-body-color: #{$textColor};
   

2. 转为RGB格式
   如果需要RGB格式的颜色，要把to-rgb()的结果包裹在rgb()函数里：

   --bs-body-color: rgb(#{to-rgb($textColor)});
   

基于变量生成阴影 #

要基于$textColor生成阴影，直接在主题块里用SCSS的颜色函数即可，后续修改$textColor时阴影会自动同步：

[data-bs-theme="corporate"] {
  // 先正确设置文本颜色
  --bs-body-color: #{$textColor};
  
  // 给输入框添加半透明阴影
  .form-control {
    color: var(--bs-body-color);
    box-shadow: 0 2px 4px rgba($textColor, 0.2);
  }
}

完整修正后的代码 #

$header-blue:  #1D46F3;
$textColor: #002579;
$white: #ffffff; // 确保$white变量已定义，避免编译报错

[data-bs-theme="corporate"] {
  --bs-body-color: #{$textColor};
  --bs-body-color-rgb: #{to-rgb($white)};
  --bs-body-bg: var(--bs-white);
  --bs-body-bg-rgb: #{to-rgb($white)};
  --bs-emphasis-color: rgb(#{to-rgb($textColor)});
  --bs-table-color: #{$textColor};
  --bs-table-color-state: #{$textColor};
  
  // 自定义输入框样式示例
  .form-control {
    color: var(--bs-body-color);
    box-shadow: 0 0 3px rgba($textColor, 0.15);
  }
}

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