UI Skinning

THEOplayer allows you to style the player to your own needs. This guide will give an in-depth explanation of which colors can be changed and which parts of the player are affected. First it will explain how to change the skin of your player using 6 custom CSS classes. Afterwards, an overview follows explaining which parts of the players are affected by each class. If you don't already have an up-and-running version of THEOplayer, take a look at our getting started guide.

Table of Contents


Web SDK Android SDK iOS SDK tvOS SDK Android TV SDK Chromecast SDK
Yes Yes Yes No No No

CSS properties to override

THEOplayer provides multiple colors you can change to create your desired look-and-feel. These colors can be changed easily by including a custom CSS file which overrides some classes. An example of such a file is given below. There is also a demo page available where you can interactively change these colors and immediately see the effect here. NOTE: The vjs-selected is needed to change the color of selected items in the menus.

  .vjs-selected {
    color: #ffc50f !important;

  .theo-primary-background {
    color: #000000 !important;
    background-color: #ffc50f !important;

  .theo-secondary-color {
    color: #ffffff !important;

  .theo-secondary-background {
    color: #000000 !important;
    background-color: #ffffff !important;

  .theo-tertiary-color {
    color: #000000 !important;

  .theo-tertiary-background {
    color: #ffffff !important;
    background-color: #000000 !important;

Affected Components

This section discusses which parts of the components are affected by each CSS class.

When the player is added to the page, the only visible control is the big-play-button. The color of this component is equal to the theoplayer-primary-color.

When the big-play-button is clicked, the player starts playing the video. Two components are visible now: the control-bar and the sharing button.

The background color of the** control bar** can be styled using theoplayer-tertiary-color.

The control bar exists of: control-bar-icons, the progress bar and menus.

  • The color of the control bar icons can be set using theoplayer-secondary-color.
  • The color of the progress bar can be set using theoplayer-primary-color.
  • The color and background color of the header of the menu can be set using theoplayer-primary-background.
  • The color and background color of the content of the menu can be set using theoplayer-tertiary-background.
  • The color of the selected text of the menu can be set using theoplayer-primary-color.


After this tutorial, you should be able to style your THEOplayer to your own needs. All CSS properties and the components they affect were discussed. A brief summary of these properties is given below:

Color Affected components
Primary color Big play button, progress bar, menu text
Primary background Menu header
Secondary color Control bar icons (including time and tooltips)
Secondary background Social sharing close button
Tertiary color Control bar background
Tertiary background Menu content background


Our mobile player uses the same class naming as our web version, so this is applicable to mobile as well. The CSS changes are to be gathered in a custom .CSS file, added to your project and then loaded into the PlayerConfiguration. More information on How to add CSS or JavaScript files to an Android/iOS project .

Legacy iOS/tvOS SDK (4.12.x)
let cssPath = Bundle.main.path(forResource: "style", ofType: "css")!
let theoConfig = THEOplayerConfiguration(cssPaths: [cssPath])
let theoplayer = THEOplayer(with: //frame, configuration: theoConfig)
Legacy Android SDK (4.12.x)

You can do this either by XML:


Or directly in the player config in Java:

THEOplayerConfig playerConfig = new THEOplayerConfig.Builder()
        .cssPaths("path/to/style1.css","path/to/style2.css") // Path is relative to the location of the assets directory
THEOplayerView tpv = new THEOplayerView(this, playerConfig);

It is also possible to change certain parts of the UI by editing the xml resources directly. E.g. colors.xml:

<?xml version="1.0" encoding="utf-8"?>
    <color name="colorPrimary">#E361FF</color>
    <color name="colorPrimaryDark">#00574B</color>
    <color name="colorAccent">#D81B60</color>
Make sure to follow us on GitHub!
Copyright © 2022. All Rights Reserved.
New York