TIP

How to use the color styles

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

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

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

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 !

Reuse a color and customize it

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.

Go further

You can see how colors are used in a TextComponent in the Webview_SB_like preset in the materials repository.