Custom Themes

Theming for Rocket.Chat is an incomplete feature and we encourage developers to contribute to this issue. We'd love to hear from anyone working on themes in the #skins-and-theming group channel.
To customize the Rocket.Chat UI you can either modify the rocketchat-theme or rocketchat-ui packages directly, but if you're keeping in sync with active development it would be easier to avoid conflicts by creating your own theme package.
Creating a Theme
You can add theme customisations to Rocket.Chat by just creating a Meteor package with your code, then adding it to the packages file.
Private themes would need to be maintained on your own fork of Rocket.Chat, but public themes could be published as a Meteor package outside the Rocket.Chat repo.
The minimum contents for a theme package would be a package.js file containing the description, e.g:
1
Package.describe({
2
    name: 'author:mytheme',
3
    version: '0.0.1',
4
    summary: 'My theme customisations.',
5
    git: 'https://github.com/author/my-rocket.chat-theme'
6
});
Copied!
Then include dependent packages and your custom theme files. e.g:
1
Package.onUse(function(api) {
2
    api.versionsFrom('1.2');
3
    api.use([
4
        'templating',
5
        'rocketchat:lib',
6
        'rocketchat:theme'
7
    ]);
8
    api.use('templating', 'client');
Copied!
Adding Stylesheets
The rocketchat-theme package has methods for including Less asset files in the build. Less files (and the a server.coffee or .js file to load them) must first be included in the package.js manifest (within the Package.onUse function), e.g.:
1
    api.addAssets([
2
        'assets/theme.less'
3
    ], 'server');
4
    api.addFiles([
5
        'server.coffee'
6
    ], 'server');
Copied!
Then in server.coffee...
1
RocketChat.theme.addPackageAsset -> Assets.getText 'assets/theme.less'
Copied!
That will read in any styles and variables from your custom less file and compile it with the rest of the css.
Adding and Modifying Templates
A suggested approach for including custom templates and helpers is to use the 'aldeed:template-extension' package (include it in your main packages file). In your package manifest, declare use of the template-extension package, then add your template files to Meteor api.addFiles([myfiles], 'client').
Here's an example replacing the unauthorized page template:
In package.js
1
    api.addFiles(['views/notAuthorized.html', 'client.coffee'], 'client');
Copied!
In views/notAuthorized.html
1
<template name="myNotAuthorized">
2
    <h2>My Custom Not Authorized Page</h2>
3
</template>
Copied!
In client.coffee
1
Template.myNotAuthorized.replaces 'notAuthorized'
Copied!
See the docs for that package for more info on inheriting and overwriting templates and helpers.

UI Components

UI Colors

Last modified 9mo ago

Export as PDF

Copy link

Edit on GitHub

Contents

Creating a Theme

Adding Stylesheets

Adding and Modifying Templates