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.