Styling the player

The colours of the player and transport controls can be set using the configuration options. However if you need further control over the styling you can use CSS variables to make more fine-grained changes to the styling. The following custom properties can be used:

Supported properties

--radioplayer-background-colour

The background colour for the transport controls, and the icon colour for the play button. In dark mode this is the colour of the button icons and text labels, and secondary colour for the scrub bar.

Default: white

--radioplayer-foreground-colour

The colour of the button icons and transport control label text. It is also the secondary colour for the scrub bar. In dark mode this is the background colour instead.

Default: black

--radioplayer-theme-colour

This is the value passed in via the themeColour property, but can be set as a CSS variable instead. It is used as the colour for the play button and primary colour for the scrub bar.

Default: Radioplayer Red

--radioplayer-widget-background

The is applied as the background CSS property for the widget space. This can be any value valid as a CSS background, including colours, gradients or images.

Default: #868686

Setting the properties

CSS custom properties are set in the same way as any other CSS property, with the same scope. The simplest way is to set them in a style that targets the player, e.g.

[data-widget-radioplayer] {
    /* These properties are required */
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    position: absolute;
    /* Custom styles */
    --radioplayer-background-colour: blue;
    --radioplayer-foreground-colour: green;
    --radioplayer-theme-colour: purple;
    --radioplayer-widget-background: repeat-x url("//placekitten.com/100/400");
}