Theme basics

The files

Every needs to have 3 files minimum: index.html,thumbnail.jpg and config.json

index.html contains all of your code for the theme, You can use this just like a normal html file. It can have <link> tags for css files, <script> tags for javascript files and everything else.

thumbnail.jpg must be a screenshot of your theme in action, this is used for displaying the theme in the theme selection menu.

config.json is a configuration file for your theme, it doesnt contain much. It has 3 keys: title, description and theme_color. The first 2 are self explainatory and theme_color is the color used in the theme selection menu. Here is an example:

{
    "title": "Flux",
    "description": "System default",
    "theme_color": "#FF00CB"
}

Making it functional

So now you have your theme in html and css, maybe a tiny bit of javascript animation. What now?

This is the moment to introduce you to ipc events. I will be going over the basics to make your theme actually work. A list of ipc events can be found here.

You can use send an event with this code: window.ipcRenderer.send('event_name', 'data') In this code the 'data' is the data being sent to the code handling the themes.

you can receive an event with this code: window.ipcRenderer.on('event_name',function (event, data) {}) In that code data is the data you are receiving from this event.

The most important ipc events are init, init_complete and theme_finished_loading The first one, init. is to tell CemUI when to send the game information. init_complete will then send the game information to you. when you parsed all of your games into the html page you then send theme_finished_loading to remove the loading screen. A quick example and documentation of the init_complete data:

    let games = data.library;
    for (var i=0,length = games.length ;i<length;i++) {
        console.log(games[i].boxart); //boxart url
        console.log(games[i].title_id); //game id
        console.log(games[i].name); //game name
        console.log(games[i].description); //game description
        console.log(games[i].screenshots[]); //array of screenshots
    }
})

see this for an advanced documentation of the game data.