Improve themes documentation

[mihkeleidast]

Hey! Thanks again for this project. I'm currently setting up Playroom for a project that has multiple themes. From the current docs, it's quite difficult to grasp exactly what needs to be added / defined to add themes.

Similar to your components file, your themes file is expected to export a single object or a series of named exports.

From this sentence - if exporting a single object, what should the shape of the object be? If I do some named exports, what exactly should I export? I did not manage to make it work with a single object export, but was successful after a bit of trial and error with named exports:

// ./src/themes.js
export const themeA = {
    name: 'themeA',
};
export const themeB = {
    name: 'themeB'
};

This will add the themes to the UI and expose the exported object to the frame component as the theme prop.

Another issue I ran into was that Playroom automatically exposed the name of the exported object in the UI. Is it possible to define a property to the exported object that would be used instead? In my case, my theme/brand is called super, and since that is a restricted keyword in JS, I would prefer not to use it as the object name. Instead, I'd like to name the object as superTheme (or similar) and define the actual visible name of the theme in the object. Totally unsure if this is doable right now without diving into the source code.

Happy to help with this, if needed, but not sure I can without knowing how the system is supposed to work.