> For the complete documentation index, see [llms.txt](https://blueeast.gitbook.io/bluerain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://blueeast.gitbook.io/bluerain/key-concepts/plugins/developing-a-theme-plugin.md).

# Developing a Theme Plugin

A plugin can register any number of themes. To do this simple set the `themes` property of your plugin class.

```typescript
class MaterialUIPlugin extends Plugin {

    public themes = [{
        name: 'Material UI (Light)',
        slug: 'material-ui-light',
        mode: 'light',
        
        // .. other theme props
    }, {
        name: 'Material UI (Dark)',
        slug: 'material-ui-dark',
        mode: 'dark',
        
        // .. other theme props
    }]
}
```

{% hint style="warning" %}
The following guide needs to be added to [Themes](/bluerain/key-concepts/themes.md) section.
{% endhint %}

Each object in the theme property can be a [BlueBase Module](/bluerain/key-concepts/bluerain-modules.md). This mean each theme's code can be split into different bundles on web.

```typescript
class MaterialUIPlugin extends Plugin {

    public themes = [
		import('path/to/theme-1'),
		import('path/to/theme-2'),
	]
}
```

Be aware though, that if you use this approach, these bundles will be downloaded during boot time. This is because BlueBase needs know each theme's `name` and `slug` to store them in registry.

If you want to split the theme so that they are downloaded only when selected, spilt the internal `theme` property.

```typescript
class MaterialUIPlugin extends Plugin {

    public themes = [{
        name: 'Material UI (Light)',
        slug: 'material-ui-light',
        mode: 'light',
        
        theme: import('./theme-rules-light'),

        // .. other theme props
    }, {
        name: 'Material UI (Dark)',
        slug: 'material-ui-dark',
        mode: 'dark',
        
        theme: import('./theme-rules-dark'),
        
        // .. other theme props
    }]
}
```