Customizing Colors

Prev Next

Customizing colors are applicable from Rocket.Chat v6.0

One of the key aspects of white-labeling your Rocket.Chat workspace is the ability to customize colors. This feature allows you to ensure that your Rocket.Chat workspace aligns with your brand's color palette, further enhancing the sense of brand consistency and identity.

Rocket.Chat provides a comprehensive list of color variables that you can adjust to match your brand's color scheme. These variables control various workspace elements, including stroke colors, surface colors, font colors, status colors, shadow colors, and button colors.

Colors are customizable through the custom CSS field in the admin panel. Go to Administration > Workspace > Settings > Layout > Custom CSS.

If you are modifying workspaces in the production environment, note the following points:

  • Customizing the user interface (UI) colors can significantly impact contrast, potentially leading to your UI not meeting WCAG standards. Additionally, any color changes you make will apply to all color themes (light, dark, and custom themes).

  • While many UI elements can be customized, we strongly recommend focusing your color changes on buttons only, as this enhances brand alignment without disrupting the user experience.

Token name

A typical token looks something like this:

button-background-primary-default

Each part of this token indicates a specific UI element:

  • button: The UI elements it is responsible for.

  • background: The part of this UI element.

  • primary: The type of UI element.

  • default: The state of this UI element.

Overwrite existing variables

Append !important if you want to overwrite existing CSS fields. This is due to the CSS specificity rules. For details, refer to !important.

.rcx-sidebar--main {
  --rcx-color-surface-sidebar: #5c030c !important;
}

Variable list

It is recommended that you modify the variables outlined in this section in the Layout > Custom CSS section of your workspace settings. This creates a cohesive experience by targeting all UI elements using the particular variable.

The comments for each variable briefly describe the elements that are affected when you modify them. You can try these out in your own development or test environment.

The following variables can be used to modify generic and interactive elements for your workspace:

.rcx-content--main {
--rcx-color-stroke-extra-light: #2F343D; /* dividers for rooms and settings, file borders */
--rcx-color-stroke-light: #333842; /* dividers on sidebars, borders for input fields */
--rcx-color-stroke-medium: #404754; /* color of disabled toggle button */
--rcx-color-stroke-dark: #9EA2A8; /* color displayed briefly when you click a toggle button, color for scroll bars */

/* the following variables define colors for loading screens and highlighted input fields, including the message box */
--rcx-color-stroke-extra-dark: #CBCED1;
--rcx-color-stroke-extra-light-highlight: #87CBFC;
--rcx-color-stroke-highlight: #3976D1;
--rcx-color-stroke-extra-light-error: #F49AA6;
--rcx-color-stroke-error: #BB3E4E;
}

The following variables can be used to modify the appearance of various surfaces:

.rcx-content--main {
--rcx-color-surface-light: #262931; /* fill color for the message box, input fields, grid boxes, and background color for settings */
--rcx-color-surface-tint: #1F2329; /* background color for: home page, various admin pages, settings page, notifications at top-right when settings are saved, hover action for settings, code font background in settings */
--rcx-color-surface-room: #1F2329; /* background color for rooms */
--rcx-color-surface-neutral: #2D3039; /* background color for message options in the message box */
--rcx-color-surface-disabled: #24272E; /* fill color for disabled input fields*/
--rcx-color-surface-hover: #1A1E23; /* color for these hover actions: sidebar, messages, room options menu */
--rcx-color-surface-selected: #3C3F44; /* color for click action and selected room and setting in sidebar, selected options in drop-down menu in the settings */
--rcx-color-surface-dark: #E4E7EA; /* tooltip color when a user hovers over an element and setting */
}

The following variables can be used to change the font color for different UI elements:

.rcx-content--main {
--rcx-color-font-white: #2F343D; /* the text color for tooltips */
--rcx-color-font-disabled: #3E4146; /* color for text that is disabled, for example, unavailable features on your workspace */
--rcx-color-font-hint: #9EA2A8; /* text color for descriptions of settings, tab headings, and other admin sections */
--rcx-color-font-secondary-info: #9EA2A8; /* text color for descriptions of settings and in rooms, secondary text in admin settings */
--rcx-color-font-default: #E4E7EA; /* primary text color */
--rcx-color-font-titles-labels: #F2F3F5; /* text color for labels and titles in settings */
--rcx-color-font-info: #739EDE; /* text color for links, selected tabs in the admin section */
--rcx-color-font-danger: #CF6E7A; /* text color for errors */

--rcx-color-button-font-on-secondary: #E4E7EA; /* font color for secondary text and icon elements on home page, rooms, settings, etc. */
--rcx-color-button-font-on-secondary-danger: #C14454; /* color for text on secondary danger elements in settings */
--rcx-color-button-font-on-success: #FFFFFF; /* text color for certain success buttons */
--rcx-color-button-font-on-primary-disabled: #6C727A; /* text color for primary elements (such as, buttons) when they cannot be selected */
--rcx-color-button-font-on-secondary-disabled: #6C727A; /* text color for secondary elements when they cannot be selected */
--rcx-color-button-font-on-secondary-danger-disabled: #613339; /* text color for secondary danger elements when they cannot be selected */
--rcx-color-button-font-on-danger-disabled: #757575; /* text color for danger elements when they cannot be selected */
--rcx-color-button-font-on-success-disabled: #757575; /* text color for certain success buttons when they cannot be selected */
}

The following color variables can be used to modify to banners, such as, announcement banners at the top of the workspace.

.rcx-content--main {
--rcx-color-status-background-info: #A8C3EB;
--rcx-color-status-background-success: #C1EBDD; /* background color for success elements */
--rcx-color-status-background-warning: #FEEFBE;
--rcx-color-status-background-warning-2: #4E4731;
--rcx-color-status-background-danger: #FFBDC5;
--rcx-color-status-background-service-1: #FCE3CF;
}

The following color variables can be used to modify elements such as callout borders, specific icon colors, progress bars, tags, engagement dashboard, and logs.

.rcx-content--main {
--rcx-color-status-font-on-info: #739EDE;
--rcx-color-status-font-on-success: #58AD90; /* color for elements (top-right) when a setting is saved successfully */
--rcx-color-status-font-on-warning: #C7AA66;
--rcx-color-status-font-on-warning-2: #FFFFFF;
--rcx-color-status-font-on-danger: #D88892;
--rcx-color-status-font-on-service-1: #CA9163;
--rcx-color-status-font-on-service-2 : #C393D2;
}

The following variables can be used to modify other UI elements:

.rcx-content--main {
/* badge tokens affect badges, such as, unread notifications */
--rcx-color-badge-background-level-1: #484C51;
--rcx-color-badge-background-level-2: #3070CF;
--rcx-color-badge-background-level-3: #A9642D;
--rcx-color-badge-background-level-4: #BB3E4E;

/* the following variables can be used to modify the degree of shadow to be displayed for certain elements */
--rcx-color-shadow-elevation-1: rgba(9, 9, 9, 0.35);
--rcx-color-shadow-elevation-2x: rgba(9, 9, 9, 0.3);
--rcx-color-shadow-elevation-2y: rgba(9, 9, 9, 0.45);
}

The following variables can be used to modify primary and secondary elements:

.rcx-content--main {
--rcx-color-button-background-primary-default: #3976D1; /* background color for primary buttons on home page, in settings, enabled toggle switches */
--rcx-color-button-background-primary-hover: #295EAE; /* background color for hover actions on the primary buttons */
--rcx-color-button-background-primary-press: #245399; /* background color for buttons when pressed */
--rcx-color-button-background-primary-focus: #3976D1; /* background color for elements when on focus */
--rcx-color-button-background-primary-keyfocus: #3976D1; /* background color for elements when focused using the keyboard */
--rcx-color-button-background-primary-disabled: #1D3963; /* background color for primary buttons that cannot be selected */

--rcx-color-button-background-secondary-default: #2F343D; /* background color for secondary buttons on home page, in settings, rooms */
--rcx-color-button-background-secondary-hover: #3A404B; /* background color for hover actions on the secondary buttons */
--rcx-color-button-background-secondary-press: #454C59; /* background color for buttons when pressed */
--rcx-color-button-background-secondary-focus: #2F343D; /* background color for elements when on focus */
--rcx-color-button-background-secondary-keyfocus: #2F343D; /* background color for elements when focused using the keyboard */
--rcx-color-button-background-secondary-disabled: #2F343D; /* background color for secondary buttons that cannot be selected */

--rcx-color-button-background-secondary-danger-default: #2F343D; /* default background color for secondary danger buttons */
--rcx-color-button-background-secondary-danger-hover: #3A404B; /* hover action background color for secondary danger buttons */
--rcx-color-button-background-secondary-danger-press: #454C59; /* color when the secondary danger element is clicked */
--rcx-color-button-background-secondary-danger-focus: #2F343D; /* background color for elements when on focus */
--rcx-color-button-background-secondary-danger-keyfocus: #2F343D; /* background color for elements when focused using the keyboard */
--rcx-color-button-background-secondary-danger-disabled: #2F343D; /* background color for secondary danger buttons that cannot be selected */
}

The following variables can be used to change the background colors of danger and success elements (check out the Fuselage components for details):

.rcx-content--main {
--rcx-color-button-background-danger-default: #BB3E4E;
--rcx-color-button-background-danger-hover: #95323F;
--rcx-color-button-background-danger-press: #822C37;
--rcx-color-button-background-danger-focus: #BB3E4E;
--rcx-color-button-background-danger-keyfocus: #BB3E4E;
--rcx-color-button-background-danger-disabled: #3D2126;

--rcx-color-button-background-success-default: #1D7256;
--rcx-color-button-background-success-hover: #175943;
--rcx-color-button-background-success-press: #134937;
--rcx-color-button-background-success-focus: #1D7256;
--rcx-color-button-background-success-keyfocus: #1D7256;
--rcx-color-button-background-success-disabled: #1E4B40;
}

Sidebar color variable list

The following variables can be used to modify the sidebar’s UI elements:

.rcx-sidebar--main {
--rcx-color-stroke-medium: #324677;
--rcx-color-surface-tint: #262931;
--rcx-color-surface-hover: #1B1D22;
--rcx-color-surface-selected: #31363F;

--rcx-color-button-background-secondary-default: #0D0F11; /* background color for secondary elements (such as, roles and dates in rooms, buttons) */
--rcx-color-button-background-secondary-press: #2C313A; /* background color for secondary elements when they are clicked */
--rcx-color-button-background-secondary-focus: #0D0F11;
--rcx-color-button-icon-disabled-color: #6C727A;

/* the following variables can be used to modify user presence colors (online, away, busy, offline) */
--rcx-color-status-bullet-online: #1CBF89;
--rcx-color-status-bullet-busy: #C14454;
--rcx-color-status-bullet-away: #AC892F;
--rcx-color-status-bullet-offline: #6C727A;
}

By adjusting the color variables, you can ensure that your Rocket.Chat workspace aligns perfectly with your brand identity, providing a consistent and engaging user experience.

For reference, you can check out the Fuselage components for details on the button variants.