Styling User Interfaces

This article will explain how we can style our SplashKit interfaces to match our projects. Written by Sean Boettger on May 17 2024

In this article we’ll see how we can customize the style of our interfaces, to make them match the visual design of our projects! We’ll cover using the style presets, how to customize individual colors, and other aspects like fonts and spacing.

Part 1: Colors and Shadows

Using Preset Styles

SplashKit comes with a few preset styles that make it easy to start customizing the interface. To use them, just call Set Interface Style with the style you want - any elements created after this will use the new style! Here’s an example:

C++

# include "splashkit.h"

int main()
{
    // open a window
    open_window("My Interface!", 800, 600);

    set_interface_style(SHADED_LIGHT_STYLE);

    while (!quit_requested())
    {
        process_events();

        clear_screen(COLOR_WHITE);

        button("My Button!", rectangle_from(300, 260, 200, 24));

        draw_interface();

        refresh_screen();
    }

    // program ends, and the window closes
    return 0;
}

You can choose from any of the styles in Interface Style. Here’s how they look with a more complex interface:

SHADED_DARK_STYLE - A dark-mode interface with shadows and depth. (Default)	FLAT_DARK_STYLE - A flat, dark-mode interface.
SHADED_LIGHT_STYLE - A light-mode interface with shadows and depth.	FLAT_LIGHT_STYLE - A flat, light-mode interface.
BUBBLE - A light-mode interface with a semi-transparent bubbly look.	BUBBLE_MULTICOLORED - A light-mode interface with a semi-transparent bubbly look - gives a multi-coloured result when provided a color.

You can also customize a preset a little by providing an optional color that it can use - for instance, set_interface_style(SHADED_DARK_STYLE , hsb_color(0.6, 0.4, 1.0)) (using light blue) provides the following results:

Custom Styles

You can also create your own unique look with the other interface style functions. The main two to try first are:

• Set Interface Colors Auto, sets the majority of the interface’s colors in one go
• Set Interface Shadows, changes the color of and how blurry shadows are (see below)

For text, there’s also:

• Set Interface Text Color, changes the color of text inside panels/elements
• Set Interface Root Text Color, changes the color of text on the main window

SplashKit Interfaces

When creating custom styles, try to make sure they still look good! Keeping things subtle is usually a good idea.

There are also a variety of other functions that allow you to set colors for specific things, like elements, panels, borders, etc. Using these gives you a lot more flexibility, but also more room to make not so great looking interfaces. If you want to try them out, you can find them all on the API!

Style Panel

As a utility for experimenting with different styles, SplashKit comes with an Interface Style Panel function. You can use this to create a panel that allows you to adjust the style - you can then note down the colors/settings you used, and set them yourself in code.

Caution

The style panel will not save your style! You’ll need to note down the settings you used, and recreate them using the interface style functions. You’ll likely want to use the HSB Color function to help with this.

Part 2: Fonts

By default, the interface will try and use a font available in your system. You can also set the font yourself, to customize how text appears!

• Set Interface Font, lets you change the current font, loaded with Load Font
• Set Interface Font Size, lets you change the current font size

C++

    font myFont = load_font("Custom Font", "arial.ttf");
    set_interface_font(myFont);
    set_interface_font_size(12);

As mentioned in the previous section, you can also adjust the color of text with the following:

• Set Interface Text Color, changes the color of text inside panels/elements
• Set Interface Root Text Color, changes the color of text on the main window

Part 3: Labels and Spacing/Padding

You can adjust the space given for labels with Set Interface Label Width - if your labels are being cut short, try increasing this from its default of 60!

You can also adjust the general spacing and padding in the interface using Set Interface Spacing.

Wrap up

You now know how to style SplashKit’s interface to suit your project! For quick customization, Set Interface Style is a great function to start with.

If your project requires a more specific look, using the remaining functions will give you a lot of scope to adjust it. Good luck with using it in your projects!