# Part 4: Themes


Understand how themes control the global styling and design system for DML blocks, similar to a shared design layer for emails. Themes define consistent typography, colors, and default styling across templates.

# Blocks & Themes

So far, we have been talking about building blocks.  However, in order for a block to be available for use in building an email, it needs to be activated for a theme – a styled collection of blocks that will be available in the email editor.

A theme defines basic style elements for its blocks. In the block editor, you can preview how your block will look in different themes by selecting **Preview** in the Theme Assignment tab under Settings
- To make your block available in a theme, toggle on the **Active** slider to the right of the theme

<img class="img-border img-center" src="https://docs.dyspatch.io/img/dml101/block-editor-themes.png" alt="Themes tab in the block editor">

Blocks can also be added to a theme from the:
- <a href="https://app.dyspatch.io/blocks" target="_blank">blocks page</a> — Select **Theme Assignment** from the 3 dot menu to the right of the block name
- <a href="https://app.dyspatch.io/themes" target="_blank">themes page</a> — Select the theme then **Manage Blocks** to toggle available blocks on or off for that theme

<img class="img-border img-center" src="https://docs.dyspatch.io/img/dml101/themes.gif" alt="A DML block can have different styling depending on the theme">

## <a href="https://docs.dyspatch.io/dml/#dys-attributes">dys-attributes</a>

Attributes for a theme can be set through the user interface in the Standard tab or with DML in the Advanced tab
- Define default styles for `dys-body`, `dys-title`, `dys-text`, and `dys-a` (links)
- Use `dys-palette` to create a color palette of up to 12 colors. These will be readily accessible inside of that theme

![Dyspatch Theme Editor](https://docs.dyspatch.io/img/emails/themes-standard-editor.png)

<div class="highlight tip">dys-attributes set in the theme will apply to all matching DML elements whose block-level styling doesn't overwrite the theme stylings</div>

## <a href="https://docs.dyspatch.io/dml/#dys-font">dys-font</a>
Using `<dys-font>` allows you to add custom fonts to your theme
- Eg. `<dys-font href='https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap' name='Nunito Sans' />`

When using web fonts, be sure to define a web-safe fallback font for users who aren’t able to view web fonts
- Eg. `font-family='Nunito Sans, Arial, sans-serif'`

## <a href="https://docs.dyspatch.io/dml/#dys-style">dys-style</a>
CSS defined inside `<dys-style>` will automatically be rendered into the head tag of the email
- Styles will by default be inlined on the outermost HTML element of a DML abstraction. You may need to look at the exported HTML to find the correct HTML element to target
- You can define inline styling with `<dys-style inline>`

You can add CSS classes to most DML elements with the attribute `css-class="class-name" `

## Putting it All Together

### Your Theme DML:
```
<dys-font href='https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap'
  name='Nunito Sans' />
<dys-attributes>
  <dys-body background-color='#FFFFFF' max-width='600px' />
  <dys-title level='h2' color='#785589' font-family='Nunito Sans, Arial, sans-serif'
  font-size='36px' line-height='46px' />
  <dys-text color='#121212' font-size='16px' line-height='18px'/>
  <dys-a color='#458FFD' text-decoration='none' />
  <dys-palette colors='#458FFD,#1B6ACC,#00BDB1,#008A92,#785589,#634771'/>
</dys-attributes>
<dys-style>
  .button a {
    background-color: #00BDB1 !important;
  }
</dys-style>
<dys-style inline>
  .highlight-text {
    background-color: #458FFD !important;
    color: #FFFFFF !important;
  }
</dys-style>
```

### Your Block DML:
```
<dys-block>
  <dys-row>
    <dys-column>
      <dys-title>
        Changing Themes
      </dys-title>
      <dys-text>
        The same <span class='highlight-text'>DML block</span> will look different
        in different themes. Check out our
        <a href='https://docs.dyspatch.io/blocks_and_themes/styling_with_themes/'>
        Knowledge Base</a> for more information!
      </dys-text>
      <dys-button align='left' css-class='button' href='https://example.com/'>
        Click Me
      </dys-button>
    </dys-column>
  </dys-row>
</dys-block>
```

### Final Result:

<img class="img-border img-center" src="https://docs.dyspatch.io/img/dml101/part4-example-block.png" alt="Example DML block">