Skip to main content

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 single 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.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
<key>Slides</key>
 <array>
    <dict>
        <key>Containers</key>
        <array>
            <dict>
                <key>BorderColor</key>
                <dict>
                    <key>DarkMode</key>
                    <string>#9E91F2</string>
                    <key>LightMode</key>
                    <string>#5944A6</string>
                </dict>
                <key>Components</key>
                <array>
                    <!-- The compenents go here -->
                </array>
            </dict>
        </array>
    </dict>
</array>

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.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
<key>Slides</key>
 <array>
    <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>
 </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.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
    <key>ColorStyles</key>
    <dict>
        <key>BrandColor</key>
        <dict>
            <key>DarkMode</key>
            <string>#9E91F2</string>
            <key>LightMode</key>
            <string>#5944A6</string>
        </dict>
    </dict>
    	<!-- ... -->
</dict>

Now we can reuse it in all our slides, like so:

<dict>
 <key>Slides</key>
 <array>
    <dict>
        <key>ContainersBorderColor</key>
        <string>BrandColor</string>
        <key>Containers</key>
        <array>
            <!-- The containers go here -->
        </array>
    </dict>
 </array>
</dict>

Pretty useful!

Discover more​

  • If you need to find some inspiration with colors, I find this website very useful.
  • Regarding the dark mode you can find a useful tip about how to handle it in Octory.
Last updated on