Share themes

At some point you’d might want to share your theme with the world or just make it exportable and packaged in a separate file.

There’s a few ways to go about this but a flexible option is to wrap the theme template in a custom element in a Javascript ESM module.

If we take the tiny-theme example from the introduction this is how the Javascript theme file would look like.

// media-theme-tiny.js
import { MediaThemeElement } from 'media-chrome/dist/media-theme-element.js';

const template = document.createElement('template');
template.innerHTML = `
    <slot name="media" slot="media"></slot>

class MediaThemeTiny extends MediaThemeElement {
  static template = template;

if (!globalThis.customElements.get('media-theme-tiny')) {
  globalThis.customElements.define('media-theme-tiny', MediaThemeTiny);

export default MediaThemeTiny;

And this is how it could be used in your web page or app.

<script type="module" src="./media-theme-tiny.js"></script>