[GH-ISSUE #519] [BUG] UI 样式受到 Figma 邮件样式的污染 #203

New issue

Closed

opened 2026-02-26 20:36:07 +03:00 by kerem · 2 comments

kerem commented

2026-02-26 20:36:07 +03:00

Owner

Originally created by @jipiyan on GitHub (Dec 16, 2024).
Original GitHub issue: https://github.com/dreamhunter2333/cloudflare_temp_email/issues/519

复现步骤

注册 Figma，并收到来自 Figma announcements@figma.com 主题为 "Styles with Figma" 的邮件
界面如下所示（以下操作仅在左侧邮件列表切换邮件，并未做多余操作）：
正常邮件（UI 界面字体颜色正常）：

Figma邮件（亮色）：

Figma邮件（暗色）：

查看邮件渲染后的 style 标签（被 Figma 邮件中的 !important 样式支配😱）：

<style type="text/css">
@media (prefers-color-scheme: dark) {
  .dark-img {
    display: block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height: inherit !important;
    max-width: inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility: inherit !important;
  }

  .light-img {
    display: none;
    display: none !important;
  }

  .darkmode {
    background-color: #000000 !important;
  }

  h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li {
    color: #fdfdfd !important;
  }

  span {
    color: #000000 !important;
  }

  .quote {
    color: #ffffff !important;
  }

  .link {
    color: #ffffff !important;
    text-decoration: underline !important;
  }

  .btn-link {
    color: #ffffff !important;
    text-decoration: none !important;
  }

  .footer a {
    color: #fdfdfd !important;
  }

  .card {
    border: 1px solid #fdfdfd !important;
  }

  .cta-border {
    color: #fdfdfd !important;
    border: 3px solid #fdfdfd !important;
  }

  .cta-border span {
    color: #7EABCE !important;
  }

  .btn-black {
    background-color: #fdfdfd !important;
    color: #000000 !important;
    border: 3px solid #fdfdfd !important;
    border-radius: 5px !important;
    mso-color: #000000 !important;
    mso-border: 3px solid #fdfdfd !important;
    mso-border-radius: 5px !important;
  }

  .btn-white {
    background-color: #fdfdfd !important;
    color: #000000 !important;
    border: 3px solid #fdfdfd !important;
    border-radius: 5px !important;
    mso-color: #000000 !important;
    mso-border: 3px solid #fdfdfd !important;
    mso-border-radius: 5px !important;
  }

  .btn-white2 {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 3px solid #fdfdfd !important;
    border-radius: 5px !important;
    mso-color: #ffffff !important;
    mso-border: 3px solid #fdfdfd !important;
    mso-border-radius: 5px !important;
  }
}
[data-ogsc] .link {
  color: #ffffff !important;
  text-decoration: underline !important;
}
[data-ogsc] .btn-link {
  color: #ffffff !important;
  text-decoration: none !important;
}
</style>

预期行为

查看 Figma 邮件时，在暗色主题下能够看清字

部署方式

cli 部署
用户界面部署

浏览器环境

macOS 14
chrome 131.0.6778.140

Originally created by @jipiyan on GitHub (Dec 16, 2024). Original GitHub issue: https://github.com/dreamhunter2333/cloudflare_temp_email/issues/519 ## 复现步骤 1. 注册 Figma，并收到来自 Figma <announcements@figma.com> 主题为 "Styles with Figma" 的邮件 2. 界面如下所示（以下操作仅在左侧邮件列表切换邮件，并未做多余操作）：正常邮件（UI 界面字体颜色正常）： <img width="1643" alt="image" src="https://github.com/user-attachments/assets/228ff294-aac3-4e16-8e87-51dcd60e37c7" /> Figma邮件（亮色）： <img width="1645" alt="image" src="https://github.com/user-attachments/assets/b14ff323-adbf-4106-81af-ee8301d704c8" /> Figma邮件（暗色）： <img width="1651" alt="image" src="https://github.com/user-attachments/assets/9a2ae754-c103-4709-a444-19e3fbf162ee" /> 查看邮件渲染后的 style 标签（被 Figma 邮件中的 !important 样式支配😱）： ```html <style type="text/css"> @media (prefers-color-scheme: dark) { .dark-img { display: block !important; width: auto !important; overflow: visible !important; float: none !important; max-height: inherit !important; max-width: inherit !important; line-height: auto !important; margin-top: 0px !important; visibility: inherit !important; } .light-img { display: none; display: none !important; } .darkmode { background-color: #000000 !important; } h1, h2, h3, h4, h5, h6, p, ul, li { color: #fdfdfd !important; } span { color: #000000 !important; } .quote { color: #ffffff !important; } .link { color: #ffffff !important; text-decoration: underline !important; } .btn-link { color: #ffffff !important; text-decoration: none !important; } .footer a { color: #fdfdfd !important; } .card { border: 1px solid #fdfdfd !important; } .cta-border { color: #fdfdfd !important; border: 3px solid #fdfdfd !important; } .cta-border span { color: #7EABCE !important; } .btn-black { background-color: #fdfdfd !important; color: #000000 !important; border: 3px solid #fdfdfd !important; border-radius: 5px !important; mso-color: #000000 !important; mso-border: 3px solid #fdfdfd !important; mso-border-radius: 5px !important; } .btn-white { background-color: #fdfdfd !important; color: #000000 !important; border: 3px solid #fdfdfd !important; border-radius: 5px !important; mso-color: #000000 !important; mso-border: 3px solid #fdfdfd !important; mso-border-radius: 5px !important; } .btn-white2 { background-color: #000000 !important; color: #ffffff !important; border: 3px solid #fdfdfd !important; border-radius: 5px !important; mso-color: #ffffff !important; mso-border: 3px solid #fdfdfd !important; mso-border-radius: 5px !important; } } [data-ogsc] .link { color: #ffffff !important; text-decoration: underline !important; } [data-ogsc] .btn-link { color: #ffffff !important; text-decoration: none !important; } </style> ``` ## 预期行为查看 Figma 邮件时，在暗色主题下能够看清字 ## 部署方式 - [ ] cli 部署 - [x] 用户界面部署 ## 浏览器环境 - macOS 14 - chrome 131.0.6778.140