Skip to main content

How to Create a "Theme" System in Your EDS

Brand consistency is key, but giving marketers flexibility to switch between brand themes—or other branding variations—can elevate your emails. In this guide, we’ll show you how to create a dynamic "theme" system in your Email Design System (EDS) using a global theme field and conditional styles.

Step 1: Define a Global Theme Field​

Start by defining a global theme field. This field allows users to select between predefined themes, such as "Light" and "Dark."

Create an enum field in your container component (a global field):

labelliquid variabletypedefault valueoptions
Themethemeenumlightlight, dark

This field makes the theme variable available globally, so it can be used anywhere in your EDS.

Step 2: Apply Themes to the Email Body​

Next, use the theme variable to dynamically style the body of your email. Below are two approaches: inline styles and <style> tags.

Using Inline Styles:

<html>
  <head>...</head>
  {% assign light_body_styles = "background-color: #ffffff; color: #000000;" %}
  {% assign dark_body_styles = "background-color: #000000; color: #ffffff;" %}
  <body style="{% if global_fields.theme == 'light' %}{{ light_body_styles }}{% else %}{{ dark_body_styles }}{% endif %}">
    ...
  </body>
</html>

Using a <style> tag:

<html>
  <head>
    <style>
      body {
        {% if global_fields.theme == 'light' %}
          background-color: #ffffff;
          color: #000000;
        {% else %}
          background-color: #000000;
          color: #ffffff;
        {% endif %}
      }
    </style>
  </head>
  <body>
    ...
  </body>
</html>

Step 3: Use the Theme Variable in Components​

You can also apply theme-based styles to components. Here’s an example of a Button CTA component:

<table>
  <tr>
    <td>
      {% assign light_button_styles = "background-color: #000000; color: #ffffff;" %}
      {% assign dark_button_styles = "background-color: #ffffff; color: #000000;" %}
      <a href="{{ button_url }}" style="{% if global_fields.theme == 'light' %}{{ light_button_styles }}{% else %}{{ dark_button_styles }}{% endif %}">
        {{ button_text }}
      </a>
    </td>
  </tr>
</table>

Hiding / showing fields based on the theme​

As a simple example, let's say you want to allow your marketers to choose a background color for a component. Based on the theme, only certain background colors are allowed by your brand guidelines.

You can use the visible-if attribute to conditionally show fields based on the theme.

Fields:

labelliquid variabletypevisible-if
Background colorlight_theme_background_colorenumglobal_fields.theme == 'light'
Background colordark_theme_background_colorenumglobal_fields.theme == 'dark'
<table>
  <tr>
    <td style="background-color: {% if global_fields.theme == 'light' %}{{ light_theme_background_color }}{% else %}{{ dark_theme_background_color }}{% endif %};">
      ...
    </td>
  </tr>
</table>

Conclusion​

By using the theme field and conditional styles, you can create a dynamic theme system in your EDS. This approach allows marketers to easily switch between themes, ensuring brand consistency across different email designs.