Appearance

Font (Dictionary)

When a key is of type FontConfiguration, for example the TextFontConfiguration of the Text Component, it allows you to configure the font used to display the title of this component. Here are the keys used in this configuration.

Keys

Summary

Name Type Possible values Required
Style String -
Name String -
TextAlignment String Left, Center,
Right, Justify
Size Number -
SystemFontWeight String Bold, Black,
Heavy, Light,
Medium,Regular,
Semibold, Thin,
UltraLight
Color Color -

Detail

Style


Name


TextAlignment


Size


SystemFontWeight


Color



Single string style

When using a parent style font you don’t want to modify, you can replace all the dictionary with a single string. Just like that:

<key>Font</key>
<string>Title</string>
Size and Name

If you specify the Name key with no Size key, Octory will use the regular size. If you specify the Size key with no Name key, the system standard font will be used. You can also specify only the SystemFontWeight. Doing so, regular size and standard font will then be used. Note that specifying the SystemFontWeight key when the Name key is also specified is irrelevant, and the SystemFontWeight key will be ignored.

Example

We define here a font using the system standard, and modify its weight, its size and the text alignment.
<dict>
	<key>FontWeight</key>
	<string>Semibold</string>
	<key>Size</key>
	<integer>30</integer>
	<key>TextAlignment</key>
	<string>Center</string>
</dict>

We define here a font using the Avenir family with the Light weight. We also specify a color for it, and modify its text alignment.
<dict>
	<key>TextAlignment</key>
	<string>Center</string>
	<key>Name</key>
	<string>Avenir-Light</string>
	<key>Color</key>
	<dict>
		<key>DarkMode</key>
		<string>#000000</string>
		<key>LightMode</key>
		<string>#FFFFFF</string>
	</dict>
</dict>


Color (Dictionary)

To fully adopt macOS Dark mode starting from Mojave, you have to give two colors when specifying a custom color. It’s up to you to check that both colors are consistent in the mode they are destined to. Do note that you can specify the same color for both dark and light mode.

Keys

Summary

Name Type Required
Style String Required
if DarkMode and LightMode are not specified
DarkMode String Required
if Style is not specified
AlphaDark Number
LightMode String Required
if Style is not specified
AlphaLight Number

Detail

Style


DarkMode


AlphaDark


LightMode


AlphaLight


Single string style

When using a parent style font you don’t want to modify, you can replace all the dictionary with a single string. Just like that:

<key>Color</key>
<string>Main</string>
Alpha

Choose #FF70FA as value to have a pink color, and #438BFF to have a blue one. Note that you can also specify the alpha in the hexadecimal code of the color, adding two more digits to the string. For example, #FF70FA7F has an alpha of 0.5 since 7F equals 127 (= 255/2) in hexadecimal code.

Example

We define here a color which will be blue for dark mode and brown for light mode. Also, the alpha in the light mode is set to 80%

<dict>
	<key>DarkMode</key>
	<string>#5F6796</string>
	<key>LightMode</key>
	<string>#965741</string>
	<key>AlphaLight</key>
	<real>0.8</real>
</dict>


Margins (Dictionary)

The Margins key allows a component to add some space from its edges. Note that the border, if any is set, will be drawn after the given space.

Keys

Summary

Name Type Required
Top Number
Bottom Number
Right Number
Left Number

Detail

Top


Bottom


Right


Left




Border (Dictionary)

The Border key lets you add a border to a Component.

Keys

Summary

Name Type Possible values Required
Edge String Top, Bottom Required
Color Color -
WidthPercent Number Left, Center,
Right, Justify
Height Number -

Detail

Edge Required


Color


WidthPercent


Height


Example

A border set at the top of a component, with a width equals to 50% of the container width.

<dict>
	<key>Edge</key>
	<string>Top</string>
	<key>WidthPercent</key>
	<real>0.5</real>
</dict>


Size (Dictionary)

Store a width and height to be used anywhere a size is needed: window size, popover size...

Keys

Summary

Name Type Required
Height Number Required
Width Number Required

Detail

Height Required


Width Required