Earlier this year, H5P Group updated the appearance of their H5P content types and introduced a theming feature. Now, you can select a color scheme that will be applied automatically to all supported content types. This is great for maintaining your corporate design.
However, there is one catch. While it’s relatively simple to change the colors by adding your own CSS declarations, this method is not very convenient. H5P Group created a theme picker to address this issue, but unfortunately, they hardwired it to their H5P.com platform. It is not available for their H5P plugins for Moodle or WordPress, nor for other H5P integrations.
On the one hand, being able to change the appearance of your content is not a life-or-death feature. But, on the other hand, making it available anywhere in a reusable way is so simple. As an advocate of open-source software, I was left unsatisfied.
SNORDIAN implemented a custom theme picker library that supports H5P’s theming. It’s free and open source, and it can be integrated wherever you need it easily. Developers can decide to use the source code directly or to just import the picker as a JavaScript module to interface with where they can put it to good use. There’s no need to create your own H5P theme picker from scratch.
To demonstrate how it works, I also created a plugin for WordPress: SNORDIAN’s H5P Themer. It reuses the aforementioned theme picker library, and it is also completely free and open source. If you’re using H5P on WordPress, just give it a try! If you need complementary features, then don’t hesitate to reach out – I create code for a living.
And if you’re running Moodle? Then Matheus Mathias has you covered. He integrated the theme picker library into his H5P Themer plugin for Moodle. And if you’re using Drupal, or TYPO3, or ILIAS, or Stud.IP, or Lumi, or NextCloud, or any other platform that offers H5P support? Then any developer is welcome to use the theme picker library to customize H5P contents.