UI Colors
    • Dark
    • PDF

    UI Colors

    • Dark
    • PDF

    Article summary

    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

    Alpha colors example colors

    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

    Side nav example colors

    Account box

    Account Box example colors

    Flex nav

    Message box

    Message box example colors

    Settings page

    Settings page example color

    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.

    Was this article helpful?

    What's Next
    Changing your password will log you out immediately. Use the new password to log back in.
    First name must have atleast 2 characters. Numbers and special characters are not allowed.
    Last name must have atleast 1 characters. Numbers and special characters are not allowed.
    Enter a valid email
    Enter a valid password
    Your profile has been successfully updated.

    Eddy AI, facilitating knowledge discovery through conversational intelligence