在AMP电子邮件中探索黑模式-DEV365 开发者社区

目的

本文将研究AMP email中暗模式支持的潜在解决方案。

AMP电子邮件支持黑暗模式吗？

不，没有暗模式支持。 amp email does not support prefers-color-scheme媒体功能，用于将自定义CSS样式用于黑暗模式。
另外，没有自动适用于AMP电子邮件模板的默认暗模式样式。在设备中设置“暗模式”的用户将查看相同的AMP模板，而无需对背景颜色或字体进行任何调整。

主要问题

ð¶尽管存在这种当前情况，AMP电子邮件仍然可以支持黑暗模式吗？

是的，通过利用特定的AMP组件，包括amp-bind， Light/Dark Mode Color Shemes可以在AMP电子邮件模板中动态选择并动态应用。。

这如何在ð¥€gmail桌面中看起来？

...在iOS的ðgmail应用中？

ð©在AMP电子邮件中创建暗模式选项

amp-bind component允许“元素可以通过数据绑定和简单的JS式表达式来响应用户操作或数据更改。

通过amp-bind和AMP.setState()操作，用户可以从下拉菜单中选择一个浅色或暗模式选项，并将自定义CSS样式应用于AMP模板。让我们开始。

1）。从<select> HTML元素开始，以创建下拉菜单。为每个<option>标签定义一个value属性

<select>
  <option value="lightMode">Light Mode</option>
  <option value="darkMode">Dark Mode</option>
</select>

2）。使用on属性创建带有change事件的event handler

<select on="change:">
  <option value="lightMode">Light Mode</option>
  <option value="darkMode">Dark Mode</option>
</select>

3）。然后将AMP.setState()方法添加到mode状态变量的update the value，并在change事件发生时具有该选项的值

<select on="change:AMP.setState({ mode: event.value })">
  <option value="lightMode">Light Mode</option>
  <option value="darkMode">Dark Mode</option>
</select>

4）。用colorScheme的id创建一个<amp-state> element。声明JSON数据并添加lightMode和darkMode的状态名称，并具有style的状态变量

<amp-state id="colorScheme">
  <script type="application/json">
    {
      "lightMode": {
        "style": "lightStyles"
      },
      "darkMode": {
        "style": "darkStyles"
      }
    }
  </script>
</amp-state>

5）。为lightStyles和darkStyles类定义CSS样式。这些样式将针对背景和字体颜色

<style amp-custom>
  /* LIGHT/DARK MODE STYLES */
  .lightStyles {
    background-color: #ffffff;
    color: #000000;
  }
  .darkStyles {
    background-color: #202124;
    color: #ffffff;
  }
</style>

6）。将<body>元素（或包裹整个电子邮件内容包装的元素）与[class]属性一起，并使用colorScheme的id绑定到<amp-state>元素。 colorScheme[mode].style表达式更新class属性

<body [class]="colorScheme[mode].style || ''">

通过这些步骤，我们可以为光模式创建一个CSS类，并为黑模式创建CSS类。当用户选择配色方案时，特定的CSS类，属性和值将立即应用于AMP电子邮件模板â2mplate-

ðamp电子邮件暗模式演示

下面是一个具有光/暗模式选项的演示。

â€ 注意：将HTML Tab代码复制并粘贴到Gmail AMP Playground或amp.dev Playground中，以获得更准确的演示体验！

ð§改进的区域

在此特定用例中，用户每次收到AMP电子邮件时都必须选择“暗模式”配色方案。 改进的经验将使用户可以选择其首选的配色方案，然后将其应用于将来的AMP电子邮件。
在iOS的Gmail应用程序中，应用黑模式样式时会有一个明显的白色边框。我还没有找到针对和删除这些白色边界或扩展模板的宽度以覆盖该区域的方法。

ð超越光和黑暗模式

由于我们对定义每个CSS类中的background-color和color值的自由和控制权，因此为创建超出光和黑暗模式的配色方案打开了大门。

让我们添加一个称为“ sunglow”的new color scheme，它将将background-color: #032932和color: #fbe707应用于放大器模板â21

<select on="change:AMP.setState({ mode: event.value })">
  <option value="lightMode">Light Mode</option>
  <option value="darkMode">Dark Mode</option>
  <option value="sunMode">Sunglow Mode</option>
</select>

<amp-state id="colorScheme">
  <script type="application/json">
    {
      "lightMode": {
        "style": "lightStyles"
      },
      "darkMode": {
        "style": "darkStyles"
      },
      "sunMode": {
        "style": "sunStyles"
      }
    }
  </script>
</amp-state>

<style amp-custom>
  /* COLOR SCHEME STYLES */
  .lightStyles {
    background-color: #ffffff;
    color: #1b1b1b;
  }
  .darkStyles {
    background-color: #202124;
    color: #ffffff;
  }
  .sunStyles {
    background-color: #032932;
    color: #fbe707;
  }
</style>

ð®展望未来

可以提供多种配色方案具有不同的对比度有助于改善AMP电子邮件中的用户体验吗？

通过amp-bind方法，AMP电子邮件也可以提供不同版本的暗模式。需要在这方面进行更多的研究和工作！ -

最后一个（重要）项目：徽标处于黑暗模式

黑暗模式的一个常见问题涉及徽标之类的图像：切换配色方案时，徽标可能会被遮盖或无意间在黑暗模式下伸出来。。

是否有一种方法可以用更适合于Amp电子邮件中暗模式的版本替换原始徽标？
``是的，由使用[hidden] expressions和event triggering，可以用“暗模式”版本。
继续以前的AMP电子邮件示例代码：

1）。同时添加Að？g和ð²DarkMode徽标

<header> <amp-img src="https://YOUR-LIGHT-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Light mode logo"></amp-img> <amp-img src="https://YOUR-DARK-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Dark mode logo"></amp-img> </header>

2）。创建一个[hidden] boolean expression，将mode的值与当前AMP状态值进行比较。当表达式评估为false时，徽标将不再隐藏，并且将变得可见

<header> <amp-img [hidden]="mode != 'lightMode'" src="https://YOUR-LIGHT-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Light mode logo"></amp-img> <amp-img [hidden]="mode != 'darkMode'" src="https://YOUR-DARK-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Dark mode logo"></amp-img> </header>

3）。将单独的hidden属性添加到暗模式徽标，以防止两个徽标在初始电子邮件加载时显示

<header> <amp-img [hidden]="mode != 'lightMode'" src="https://YOUR-LIGHT-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Light mode logo"></amp-img> <amp-img hidden [hidden]="mode != 'darkMode'" src="https://YOUR-DARK-MODE-LOGO.png" height="48" width="40" layout="fixed" alt="Dark mode logo"></amp-img> </header>

现在，当用户选择“暗模式”时，适当的徽标将显示：

ð结论

通过使用amp-bind和AMP.setState()操作，用户可以在AMP电子邮件模板上选择并应用各种配色方案。同样，通过利用[hidden]表达式，可以将徽标之类的图像替换为暗模式版本。

尽管不支持媒体功能prefers-color-scheme，但可以使用 AMP电子邮件工具来帮助创建可以使电子邮件用户受益的自定义配色方案体验。

ð -您怎么看？在下面留下您对AMP电子邮件中探索黑暗模式的想法。 -