TIP

Change the containers border color

If you ever wanted to change the border color of a container, here are not one (but two!) methods to do it.

Change the border color of a container

To do so, simply add a color key to your Container dictionary. For example here, we are setting a light blue-purple for dark mode and a darker shade for the light mode.

<dict>
    <key>BorderColor</key>
    <dict>
        <key>DarkMode</key>
        <string>#9E91F2</string>
        <key>LightMode</key>
        <string>#5944A6</string>
    </dict>
    <key>Components</key>
    <array>
        <!-- The containers go here -->
    </array>
</dict>


Change the border color of all containers in a slide

To set the border color of all containers in a slide, you can use the slide key ContainersBorderColor rather than set this color in each container. For example, to set the same color as above, here is a solution.

<dict>
    <key>ContainersBorderColor</key>
    <dict>
        <key>DarkMode</key>
        <string>#9E91F2</string>
        <key>LightMode</key>
        <string>#5944A6</string>
    </dict>
    <key>Containers</key>
    <array>
        <!-- The containers go here -->
    </array>
</dict>


Use a color style

Finally, to define your containers border color once and reuse it in each slide, you can specify it in the ColorStyles section. For example, we define here a "BrandColor" in the ColorStyles.

<key>ColorStyles</key>
<dict>
    <key>BrandColor</key>
    <dict>
        <key>DarkMode</key>
        <string>#9E91F2</string>
        <key>LightMode</key>
        <string>#5944A6</string>
    </dict>
</dict>
Now we can reuse it in all our slides, like so:
<dict>
    <key>ContainersBorderColor</key>
    <string>BrandColor</string>
    <key>Containers</key>
    <array>
        <!-- The containers go here -->
    </array>
</dict>
Pretty useful!


Go further