如何删除外部嵌入表单的字体样式？

【问题标题】：How can I remove font styling of external embedded form?如何删除外部嵌入表单的字体样式？
【发布时间】：2021-11-07 12:05:57
【问题描述】：

这是一个让我摸不着头脑的奇怪问题。我有一个带有 HubSpot 嵌入式表单的 WordPress 页面。我的主题允许暗模式并且运行良好，但是当它进入暗模式时，嵌入式 HubSpot 表单不会改变。我有点明白，但是......我就是不能这样。有没有办法可以去除或覆盖表单的颜色或其他东西？

这是页面：https://datadelivery.app

【问题讨论】：

您真的需要使用一些外部服务来制作单个表单吗？ ... 0_o
@FlashThunder 如果我理解正确，该插件将电子邮件交互与 CRM 集成，因此该表单不仅用于用户发送消息，还用于记录。
@AHaworth 没错。在幕后发生了很多事情。对我来说很容易。

标签： javascript css wordpress hubspot

【解决方案1】：

由于 HubSpot 表单已嵌入您的网站，因此无法知道您网站的主题何时更改。当启用暗模式时，您将需要添加一些自定义 CSS 来更改表单的样式。在给定的链接中，只要启用暗模式，就会将 .is-dark-theme 类添加到 <html> 标记中。因此，无论何时使用此类，您都应该能够添加 CSS 来设置表单样式。例如，下面的代码将表单的标签更改为白色文本。

.is-dark-theme .hs-form * {
  color: #ffffff;
}

您应该能够为表单中使用的其他类添加 CSS 以更改颜色以匹配您网站的暗模式主题。

【讨论】：

所以把它作为额外的css放在主题自定义中？
是的。由于表单使用内联 CSS，您可能需要将 !important 规则添加到您的样式中。所以，color: #ffffff !important;