Custom Themes
To customize the Rocket.Chat UI you can either modify the rocketchat-theme
or rocketchat-ui
packages directly.If you want to avoid conflicts with active development, it is recommended to create your own theme package.
Creating a Theme
To add theme customizations to Rocket.Chat, you can create a Meteor package with your code and add it to the package file. If you want to share your theme with others, you can publish it as a public Meteor package outside the Rocket.Chat repo. Private themes would need to be maintained on your own fork of Rocket.Chat
The minimum contents for a theme package is a package.js
file containing the description below:
Then, include dependent packages and your custom theme files like this:
Adding Stylesheets
The rocketchat-theme
package provides methods for including Less asset files in the build. To use these methods, first include the Less files and the server.coffee or server.js file to load them in the package.js
manifest (within the Package.onUse
function).
Then, in server.coffee
file,
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
Here's an example of replacing the unauthorized page template:
An effective method to add your own templates and helpers is by utilizing the 'aldeed:template-extension
' package. Simply include it in your main package file.
In your package's manifest, declare use of the
template-extension
package.Next, add your template files into Meteor using the command
api.addFiles([myfiles], 'client')
.
Here's an example of replacing the unauthorized page template:
In package.js
In views/notAuthorized.html
In client.coffee
For more detailed information about inheriting and overwriting templates and helpers, see the official documentation for meteor-template-extension.
Rocket.Chat's theming feature is not fully developed, and developers are highly encouraged to help improve it by contributing to the related issue. If you're working on themes, you're welcome to share your progress in the#skins-and-theming channel on the open server.
Last updated