Compatibility with Rocketchat 5.3.0

[bkraul]

Describe the bug
It's that time again guys, sorry to bug, but seems very minor changes are needed for 5.3.0:

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: RocketChat Desktop App 3.8.12 / Firefox
• Version: 3.8.12 (app), 106.0.1 (Firefox)

[pbaity]

I think we're all used to it 😅 so it's not a bother.

It's highly likely someone else will beat me to this, so if they do, I'd just point them to investigate #27 (comment) and see how many of these issues can be fixed now only by modifying the RC CSS variables. I genuinely hope we can soon stop updating our CSS rules each time RC classes are regenerated.

This should be getting even easier to do with coming versions. Had a conversation with some of frontends.

Example:

:root {
    --rcx-color-background-light: #525252;
    --rcx-color-background-tint: #656566;
    --rcx-color-stroke-extra-light: #3C3D3D;
    --rcx-color-stroke-light: #5E6061;
    --rcx-color-stroke-extra-light-highlight: #3F474D;
    --rcx-color-stroke-highlight: #0A377A;
    --rcx-color-surface-light: #3B3B3B;
    --rcx-color-surface-tint: #353536;
    --rcx-color-surface-neutral: #7C7E80;
    --rcx-color-surface-hover: #1B1C1C;
    --rcx-color-surface-disabled: #1E1E1F;
    --rcx-color-surface-dark: #C1DAFF;
    --rcx-color-font-white: #E3E3E3;
    --rcx-color-font-default: #A3B4D4;
    --rcx-color-font-titles-labels: #9EB3D1;
    --rcx-color-font-disabled: #434445;
    --rcx-color-font-annotation: #B8BDC4;
    --rcx-color-font-hint: #959DA8;
    --rcx-color-font-secondary-info: #99A2AD;
    --rcx-color-status-background-info: #3B5670;
    --rcx-color-status-font-on-info: #7A9DD2;
    --rcx-color-button-background-secondary-default: #282829;
    --rcx-color-button-font-on-secondary: #8D9FBA;
    --rcx-color-status-fonts-on-info: #8AB9EB;
}

[paulchen]

It's highly likely someone else will beat me to this, so if they do, I'd just point them to investigate #27 (comment) and see how many of these issues can be fixed now only by modifying the RC CSS variables. I genuinely hope we can soon stop updating our CSS rules each time RC classes are regenerated.

Since Rocket.Chat 5.3.0 was released recently, I played around a bit with the CSS variables for the colors.

So far I added these color definitions:

body.dark-mode {
	--rcx-color-font-default: var(--primary-font-color);
	--rcx-color-surface-tint: var(--color-darkest);
	--rcx-color-background-light: var(--color-darkest);
	--rcx-color-background-tint: var(--rcx-primary-dark);
	--rcx-color-font-hint: var(--rcx-color-foreground-info);	
	--rcx-color-surface-light: var(--color-darker);
	--rcx-avatar-background-color: var(--color-darkest);
	--message-box-color: var(--primary-font-color);
}

This fixes many of the obvious problems with 5.3.0. However, I guess additional work will be necessary in order to make everything appear as smooth as possible.

[paulchen]

So far I added these color definitions:

After trying these changes for one day and adding some additional minor tweaks, I created a pull request: #205. The CSS definitions should still work with earlier versions of Rocket.Chat.

[feelan03]

So far I added these color definitions:

After trying these changes for one day and adding some additional minor tweaks, I created a pull request: #205. The CSS definitions should still work with earlier versions of Rocket.Chat.

Thx. This is rly working for me

[bkraul]

@pbaity thanks for merging! and @paulchen thanks for the quick fix!