Sidebar Color Won't Change


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

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