Skip to content

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:

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

Several controls shown in a panel with the shaded dark style preset.

Several controls shown in a panel with the flat dark style preset

SHADED_DARK_STYLE - A dark-mode interface with shadows and depth. (Default)

FLAT_DARK_STYLE - A flat, dark-mode interface.

Several controls shown in a panel with the shaded light style preset

Several controls shown in a panel with the flat light style preset

SHADED_LIGHT_STYLE - A light-mode interface with shadows and depth.

FLAT_LIGHT_STYLE - A flat, light-mode interface.

Several controls shown in a panel with the bubble style preset

Several controls shown in a panel with the bubble multi-coloured style preset

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:

Several controls shown in a panel with the shaded dark style preset, tinted slightly blue

Several controls shown in a panel with the shaded light style preset, tinted slightly blue

Several controls shown in a panel with the bubble style preset, tinted slightly blue

Custom Styles

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

A gif demonstrating adjusting the blur and color of shadows in the interface.

For text, there’s also:

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.

An image of the style panel - a set of many controls that allow adjusting the interface's style.

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!

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:

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!