Themes
Picobel comes with a few pre-made themes (for times when you don't want to style an entire audio player from scratch). To use a theme, make sure you've downloaded the correct stylesheet from the Picobel CSS library and then reference the chosen theme name as an option when you initialize Picobel in your JS.
<!-- Load the theme's stylesheet -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/picobel@3/build/picobel.default.css"
>
<!-- Initialise Picobel with a theme -->
<script>
picobel( { theme: "default" } );
</script>
You can find the CSS files for each theme in the /packages/picobel/src/css directory of the GitHub repo, along with minified production-ready versions here. The filename convention is picobel.THEME_NAME.css.
Themes currently supported by Picobel v3:
- Default:
picobel.default.css - Skeleton:
picobel.skeleton.css - iTunes:
picobel.itunes.css - BBC:
picobel.bbc.css - Soundcloud:
picobel.soundcloud.css - Pitchfork:
picobel.pitchfork.css - Eaten by Monsters:
picobel.eatenbymonsters.css
You can see them all in action in the Picobel.js CodePen Collection, and see screenshots of each featured theme on this page:
Default
The default theme. The highlight colour can be altered by overriding the --highlight CSS custom property:
.picobel {
--highlight: "red";
}
Skeleton
Use this as a jumping-off point for your own styles.
BBC
A theme in the style of BBC iPlayer ~2013.
iTunes
A theme in the style of the iTunes interface ~2013.
Soundcloud
Soundcloud-esque theme. View this theme on CodePen
Pitchfork
Pitchfork-esque theme. View this theme on CodePen
Eaten by Monsters
Eaten by Monsters theme. View this theme on CodePen