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:
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...
If you are using the default UI then pass in the
noIcons property when creating your own.
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
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
to see what properties are available for changing icons.