pbaity/rocketchat-dark-mode

Channel Annoucement in dark mode using same colours as in light mode

TimmiORG opened this issue · 5 comments

TimmiORG commented

The channel announcement in dark mode is using same colours as in light mode. These colours are not fitting the dark mode.

  1. Add channel announcement to any channel
  2. view channel announcement

I recommend to use different colours for the announcement message

Seen with latest dark-mode.css and Rocket Chat 5.2.0

paulchen commented

This is how it looks like now:

image

At least for Rocket.Chat 5.3.0, the colours easily be changed by setting custom values for the four CSS variables defined here: https://github.com/RocketChat/Rocket.Chat/blob/develop/apps/meteor/app/theme/client/imports/general/variables.css#L64-L67

However, I'm quite bad at selecting colours.

Does anyone have suggestions?

chotaire commented

The same colors should be used like for banners:

d60842e732e54db4a2e246b54cc17445

body.dark-mode .rcx-banner {
	background-color: var(--color-dark-medium);
	color: var(--info-font-color) !important;
}

body.dark-mode .rcx-banner__close-button .rcx-button:hover {
    background-color: var(--color-dark-light);
    border: none;
}
  • 👍2
paulchen commented

The same colors should be used like for banners

Well, then... #206

  • 👍1
TBG-FR commented

The same colors should be used like for banners:

d60842e732e54db4a2e246b54cc17445

body.dark-mode .rcx-banner {
	background-color: var(--color-dark-medium);
	color: var(--info-font-color) !important;
}

body.dark-mode .rcx-banner__close-button .rcx-button:hover {
    background-color: var(--color-dark-light);
    border: none;
}

This needs improvement, coloured banners are displayed grey in dark mode, they should use colors (blue for primary, red for danger, etc), with obviously darker colors to fit the whole theme. I'll see what I can do

  • 👍1
chotaire commented

Keep in mind this is no longer a light theme where huge colorful banners don't make such an impact. While the grey banner is not coherent with the light theme, I personally like it much better. Anyway, starting with 5.4.0 there seems to be a difference now, there is a thick line showing the original color above the actual banner. While this is likely another missing var introduced in 5.4.0, this looks actually ok and does its job. So wait for the next update notification and check it out as it is.