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:
- MDN - Using CSS Custom Properties
- Smashing Magazine - It's Time to Start Using CSS Custom Properties
- W3C - CSS Custom Properties
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...
One of the easiest ways to personalize the player to our brand or preference is by
vm-player-theme CSS property, which will add a splash of color throughout the player...
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.
The following will apply to all controls in the player...
The following will only apply to this specific 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
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:
Vime comes with two icon libraries out of the box (
material), and you can easily
load your own via the IconLibrary component (refer to the
documentation on how to do so).
After the icons have been registered, you can use them globally by setting the
icons property on the Player component, or you can change
them on a component-by-component basis as long as there are properties to do so. Most controls support
changing their icons, for example the PlaybackControl
has properties for changing the
pauseIcon and the library via
If you're looking to replace all the player icons with your own then you should use the following naming guide to ensure all components are pointing to the correct icon, so you don't have to go around and change them individually.
Use the following names for your SVG files and place them inside the same folder: