UI Colors

In Rocket.Chat, you can customize colors by adjusting layout settings in workspace administration. Developers are encouraged to use defined variables in their work instead of hard coding colors. This allows site owners to change the color scheme with consistent results.

See the theme variables file for the currently available color settings.

These settings are accessible as variables in Less files, provided the files were compiled using the addPackageAsset method of rocketchat-theme.

Color scheme

The Rocket.Chat color scheme comprises three sets of color settings: Alpha, Major, and Minor Colors. Additional variations are created in Less but aren't exposed to settings. The naming of these settings isn't tied to specific components; instead, they reflect a visual hierarchy that promotes consistent color use in new components and theme development.

Alpha colors

Semi-transparent black or white used in components to add shading or tinting to the background color. This is useful for denoting selected or disabled states. The use of these semi-transparent colors allows site owners to easily change color scheme without defining variations for every component state individually.

• transparent-dark

• transparent-darker

• transparent-light

• transparent-lighter

Alpha colors example

Major colors

The primary palette of the app.

Contributions and modifications to components should make use of these colors.

• content-background-color #FFFFFF

• primary-background-color #04436A

• primary-font-color #444444

• primary-action-color #1d74f5

• secondary-background-color #F4F4F4

• secondary-font-color #A0A0A0

• secondary-action-color #DDDDDD

• component-color #f2f3f5

• success-color #4dff4d

• pending-color #FCB316

• error-color #BC2031

• selection-color #02ACEC

• attention-color #9C27B0

Minor colors

Minor colors designated for specific use cases will inherently derive their properties from the major colors as the default behavior. However, administrators seeking more intricate management of the color scheme can opt to utilize these minor colors.

• tertiary-background-color defaults to component-color

• tertiary-font-color defaults to transparent-light

• link-font-color defaults to primary-action-color

• info-font-color defaults to secondary-font-color

• custom-scrollbar-color defaults to transparent-dark

• status-online defaults to success-color

• status-away defaults to pending-color

• status-busy defaults to error-color

• status-offline defaults to transparent-darker

Dark UI

Computed colors enable owners to select a dark user interface (UI) with appropriate contrast. For instance, in a light UI, the disabled state might darken an element, while in a dark UI, it should lighten. This is achieved through mixins that blend the color with the background's contrast rather than using darkening or lightening functions.

See this example of form input states that dynamically contrast to both dark and light backgrounds.

Developers are advised to incorporate mixins and computed colors in their contributions instead of hard-coding variations. This ensures a consistent balance and contrast of colors, irrespective of how the scheme settings may be changed by owners.

Default colors

These examples show how the default color scheme is implemented with the main components of the Rocket.Chat UI.

Side nav

Account box

Flex nav

Message box

Settings page

The user interface (UI) is currently undergoing active development. Component refactoring is anticipated to alter and, optimistically, enhance the use of colors. The immediate objective is to centralize the application of colors and styles, laying the groundwork for the subsequent creation of a unified style guide for Rocket.Chat.