Version: 4.x

Styling

Vime uses CSS custom properties to style the player. If you're unfamiliar with them then no worries, it's really easy to understand and there are awesome articles online to get you up to speed:

Theming#

Vime comes with a light and dark theme out of the box (see the installation page for how to load them). We can use it as a starting point when styling the player. You can switch between light/dark by using the theme player property...

player.html

<!-- Default is 'dark'. -->
<vm-player theme="light">
  <!-- ... -->
</vm-player>

One of the easiest ways to personalize the player to our brand or preference is by setting the vm-player-theme CSS property, which will add a splash of color throughout the player...

player-theme.css

vm-player {
  --vm-player-theme: #de4269;
}

What if we want to do more? We can see the default theme file which has documented all CSS properties used throughout Vime, and start replacing all the properties we want to change. Remember if you apply it at the player level like we did with vm-player-theme above, it'll apply to all components that accept that property.

Global

The following will apply to all controls in the player...

vm-player {
  --vm-control-scale: 1.75;
}

Instance

The following will only apply to this specific control...

<vm-control style="--vm-control-scale: 1.75;">
  <!-- ... -->
</vm-control>

Another way you can find out what CSS properties can be used to style a specific component is by finding that component in the Components section in the sidebar (on your left), and scrolling down to CSS Properties. In addition, sometimes a component is composed of other components, so if you scroll down to Dependencies > Depends On, the CSS properties of those listed components will be available as well.

Here are some additional selectors you can add to your styling toolkit:

player-theme.css

vm-player[idle] {
  /* Add styles here for when the player is idle. */
}

vm-player[mobile] {
  /* Add styles here for when the player is loaded on a mobile device. */
}

vm-player[touch] {
  /* Add styles here for when the player is used on a touch device. */
}

vm-player[live] {
  /* Add styles here for when the media is a live stream. */
}

vm-player[audio] {
  /* Add styles here for when the media is of type `audio`. */
}

vm-player[video] {
  /* Add styles here for when the media is of type `video`. */
}

vm-player[pip] {
  /* Add styles here for when the player is in picture-in-picture mode. */
}

vm-player[fullscreen] {
  /* Add styles here for when the player is in fullscreen mode. */
}

/* You can replace 'light' with 'dark' or any custom theme name you'd like. */
vm-player[theme='light'] {
  /* Add styles here for when the theme is set to `light`.  */
}

Icons#

Vime icons are stored and loaded as an SVG sprite. The Icons component is responsible for loading them from the JSDELIVR CDN, and it's included by default when using the default UI.

To customize the icons you can create and load an SVG sprite that uses the same symbol identifiers as Vime, which can be found here (the file name is the identifier). The sprite would look something like this...

tip

If you are using the default UI then pass in the noIcons property when creating your own.

<svg>
  <defs>
    <symbol id="vime-play">
      <!-- SVG markup for the play icon here. -->
    <symbol>

    <symbol id="vime-pause">
      <!-- SVG markup for the pause icon here. -->
    <symbol>

    <!-- ... -->
  </defs>
</svg>

You can insert it into the <head> of your document manually, or you can load it using the Icons component by setting the href property to the URL of the where the SVG sprite lives.

On the other hand, if you already have icons loaded and can't use the Vime identifiers, then most predefined components have a property which you can set to change the icon. For example, the PlaybackControl has a playIcon and pauseIcon property which you can use to point to your custom icon identifier. See the component documentation for any given component (sidebar on your left under the Components section) to see what properties are available for changing icons.