Skip to main content

Dark Mode in Octory

One cool thing with the application is the full dark mode support. The interface will automatically adapt to the current mode when it is changed. However, there are a few things you have to achieve in order to improve this experience when you use images or custom colors.

Images​

When adding an ImageComponent, it is possible to specify an image for both modes. The application will then automatically use the correct one depending on the current mode. For example, let's say we have a background image with a version for light and dark modes: background_light.png and background_dark.png. To use them, an ImageComponent would look like the following.

<array>
		<dict>
            <array>
                <dict>
                    <key>Type</key>
                    <string>Image</string>
                    <key>LightModeURL</key>
                    <string>${Images}/background_light.png</string>
                    <key>DarkModeURL</key>
                    <string>${Images}/background_dark.png</string>
                    <true/>
                </dict>
            </array>
        </dict>
</array>
info

We use a custom variable Image to store the URL of the Images folder. Learn more about variables.

If you have an image which blends well in both modes, you can simply use the URL key.

<array>
		<dict>
            <array>
                <dict>
                    <key>Type</key>
                    <string>Image</string>
                    <key>URL</key>
                    <string>${Images}/background.png</string>
                </dict>
            </array>
        </dict>
</array>

Colors​

By default, the application will use the system colors as advised in the macOS guidelines , like labelColor and secondaryLabelColor for the text or systemGray for the borders. That said, you can modify those default colors to match you company brand.

Doing so, you can specify a different color depending once again on the current mode. So, imagining we have in our company a Brand_light #965741 and a Brand_dark #5F6796 colors, we can define the brand color like so

<dict>
 <array>
    <dict>
        <dict>
            <key>DarkMode</key>
            <string>#5F6796</string>
            <key>LightMode</key>
            <string>#965741</string>
        </dict>
    </dict>
 </array>
</dict>

As long as we are here, I think it's worth mentionning that you can also add an alpha value to each mode color. For example, to make the opacity of the light color to 0.8 in the previous example, here's what we have to do.

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

Finally, you can naturally specify the same color for both modes, although we truly recommend to use colors that blend well in the mode they are destined to. This is the reason why Octory does not offer a simple Value key to specify only one color.

Discover more​

  • You can take a look at the onboarding demo to see how dark mode is handled.
  • We will see in a upcoming tip how we can define color styles similarly to the font styles.
Last updated on