Skip to main content

How to use the color styles

Defining a color​

Octory offers to customise a color whenever it makes sense. For instance, it's possible to specify the color of the text in a TextComponent or the color of a Container border. Here is how it looks like in a TextComponent.

<?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>
    <dict>
        <key>Type</key>
        <string>Text</string>
        <key>Text</key>
        <string>Hi!</string>
        <key>TextFontConfiguration</key>
        <dict>
            <key>Color</key>
            <dict>
                <key>DarkMode</key>
                <string>#7eac9f</string>
                <key>LightMode</key>
                <string>#374840</string>
            </dict>
        </dict>
    </dict>
</dict>

That's great since it allows to change the color depending on the current mode. Also, it's possible to change the opacity with the alpha keys. However, it would painful to have to declare this color for each component, container or else. That's why Octory offers the colors styles section which is a dictionary of colors.

Color styles​

This colors dictionary allows to declare a color once, then to reuse it by its name anywhere in the configuration file. As an example, let's move the color used in the TextComponent to the ColorStyles section and name it "Main".

tip

You might have to add the key ColorStyle if it is not already present. In this case, please add a Dictionary key with the name "ColorStyles"

<key>ColorStyles</key>
<dict>
    <key>Main</key>
    <dict>
        <key>DarkMode</key>
        <string>#7eac9f</string>
        <key>LightMode</key>
        <string>#374840</string>
    </dict>
</dict>

Now to use the color "Main", it's possible to do the following.

<dict>
    <key>Type</key>
    <string>Text</string>
    <key>Text</key>
    <string>Hi!</string>
    <key>TextFontConfiguration</key>
    <dict>
        <key>Color</key>
        <string>Main</string>
    </dict>
</dict>

That's shorter !

Reusing & Customizing a colo​

Finally, it's possible to use the "Main" color and to change one of its properties, like the alpha, to have a local modification. Once again with the TextComponent:

<dict>
    <key>Type</key>
    <string>Text</string>
    <key>Text</key>
    <string>Hi!</string>
    <key>TextFontConfiguration</key>
    <dict>
        <key>Color</key>
        <dict>
            <key>Style</key>
            <string>Main</string>
            <key>AlphaLight</key>
            <real>0.5</real>
            <key>AlphaDark</key>
            <real>0.7</real>
        </dict>
    </dict>
</dict>

Here, the "Style" key value specifies that the color "Main" should be used. But the alpha properties are local and override the ones from the parent style.

Discover more​

You can see how colors are used in a TextComponent in the Webview Blurred Background preset in the materials repository.

Last updated on