search

pbaity / rocketchat-dark-mode

An easy user-togglable dark mode for Rocket.Chat
MIT License
369 stars 126 forks source link

Compatibility with Rocketchat 5.3.0 #204

Closed bkraul closed 1 year ago

bkraul commented 1 year ago

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

Screenshots image

Desktop (please complete the following information):

pbaity commented 1 year ago

I think we're all used to it :sweat_smile: 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 https://github.com/pbaity/rocketchat-dark-mode/issues/27#issuecomment-1288005287 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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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