Sidebar Color Won't Change

Community Support
1

Description

We just updated to v. 6.6.4 and seem to have lost the ability to change the sidebar color via custom CSS. Strangely we are able to change a lot of the other features (hover, selection, etc…) but not the background color. So essentially the “rcx-color-surface-tint:” is not doing anything. We’ve been using the “!important” workaround - any other ideas? I’ve tried adding/removing important, changing the order of the customizations, trying to only change the tint without any luck.

.rcx-sidebar–main {
–rcx-color-surface-selected: #222a5f!important;
–rcx-color-surface-tint: #222a5f!important;
–rcx-color-surface-hover: #3fafef!important;
}

Server Setup Information

  • Version of Rocket.Chat Server:
  • Operating System:
  • Deployment Method:
  • Number of Running Instances:
  • DB Replicaset Oplog:
  • NodeJS Version: v14.21.3
  • MongoDB Version: 5.0.25 / wiredTiger
  • Proxy:
  • Firewalls involved:

Any additional Information

1 Like
2

To change the sidebar color in Rocket.Chat, you can use custom CSS. However, if the “rcx-color-surface-tint” property isn’t working, try using “!important” as a workaround. Make sure to check the order of customization and only change the tint value. Doglikesbest