Skip to main content

Themes

Our dock and each overlay can be presented differently from their default styles thanks to the theme feature. It simply is a matter of writing CSS code, based on our CSS framework, and using the theme parameter provided for this purpose. There are two ways to configure this parameter to apply the theme of your choice.

Remote URL​

https://obs.multistream.tools/v1/dock?theme=https://obs.multistream.tools/v1/themes/streamelements/dock.css
https://obs.multistream.tools/v1/dock?theme=https://your-domain.com/theme.css
https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?theme=https://your-domain.com/theme.css
https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/dock.html?theme=https://obs.multistream.tools/v1/themes/streamelements/dock. css

Here we will point to a remote CSS file, via its URL, served over HTTPS. This is the solution that we recommend because, this way, the same theme can easily be applied to different installations of OBS and each of its updates will be automatically propagated to these.

info

It is possible to use a relative path when the chosen theme is located on the same domain as the page to which it applies. This allows for example to write a shorter URL when using the provided ready-to-use themes.

https://obs.multistream.tools/v1/dock?theme=./themes/streamelements/dock.css
https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?theme=./theme.css

Data URL​

https://obs.multistream.tools/v1/dock?theme=data:text/css;base64,<data>
https://obs.multistream.tools/v1/wrapper?url=https://your-domain.com/overlay.html?theme=data:text/css;base64,<data>

You can also use data URLs. This solution is not recommended because it generates very long and opaque URLs - therefore relatively complex to modify - and requires maintenance on each OBS installation that you have. However, data URLs avoid HTTP requests and therefore provide better loading times; which may be preferable in rare cases such as changing only a few colors.

Ready-to-use themes​

Our dock must remain generic, so it is not possible for its default theme to define, for example, colors linked to specific events of specific platforms to its activity feed; therefore, reading it may seem monotonous. For this reason, we provide ready-to-use open source themes that support the most popular platforms today and can also serve as examples for developing your own themes.

tip

These can also apply to the docks of our ready-to-use overlays as well as yours based on our CSS framework.