Merge into rocketchat?

[melroy89]

Any idea to make this fantastic feature upstream available within rocket chat by default?

That would be really nice. Please, consider doing/trying so.

Regards,
Melroy

[pbaity]

Hi and welcome Melroy! Happy to hear you find this project worthwhile enough to want to see it sent upstream. So do I. That being said, there are two big things stopping me from pushing this upstream as-is:

1. A lot of people want more than just dark mode; they want customizable themes. See the two years worth of comments on this PR and this feature request.
2. I've heard that Rocket.Chat is moving towards using React Native, with dark mode built in. (Can't find where else I've read this, but somewhere.)

But that doesn't mean I'm still not very committed to seeing dark mode in Rocket.Chat. See my comment on the feature request and feel free to comment there too. For the time being, I'm leaving this issue open so others can see this and join in pushing for dark mode upstream.

[melroy89]

Thanks for your fast reply.

To be honest I only see this project regarding React Native, but this is only the Android/iOS App AFAIK. Which can properly also takes ages before that is production ready (no offence to anybody).

See:
https://github.com/RocketChat/Rocket.Chat.ReactNative

I think in the meanwhile we can use this solution. And later we can always extend it/replace it.

[brittyazel]

Yeah after talking with the RocketChat devs I'm not sure if they plan on moving the web client to React. They seemed to indicate that the Meteor version that we have is for the long term

[rodrigok]

Hi, Rocket.Chat's CTO here.

We are currently migrating to React using our new UI components library called Fuselage. Our design team is working right now on a Dark Theme for those components and some changes on Mobile Themes to sync colors with what we are doing for the web.

I'll ask the Design Team to share our ideas here as well, but the implementation on the UI may take a while since we are still far away from the end of the React migration.

[pbaity]

@rodrigok Thanks for the update! Great to hear from you directly.

Is the migration to React being done in the open somewhere that contributions can be made? Are there other issues blocking the way to Dark Theme that anyone can pick up now?

If any of the Design Team is willing to share ideas here, that'd be great. This project has attracted quite a few really cool people who I know are willing and able to help contribute to a Dark Theme, and if there's a roadmap for moving forward, we'd want to be a part of it.

[rodrigok]

Sure, the design team will share something here soon.

Regarding the contributions, I'll call @ggazzo here, he is our Front End Lead and may have something to share as well.

Part of our admin area is already running on React, so you can check the Rocket.Chat repo and the Fuselage one.

[engelgabriel]

Just a sneak peek of what we are working on:

[ankar84]

Just a sneak peek of what we are working on:

It looks really fantastic! 👍🏻
And I see channels avatar implemented. A lot of people including me waiting that feature.

[ae5960e8-a6fc-491f-b252-898ecf59af95]

Mr Engel, do you have a progress update on this matter for us? Thank you.

[chlab]

@engelgabriel is this now available?

[geekgonecrazy]

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;
}

I believe our design team is still working on some final values here to make dark mode

[geekgonecrazy]

https://forums.rocket.chat/t/5-4-0-dark-theme/15504/2 - in case you hadn't seen

[MFijak]

If someone wants to unlock the hidden menu permanently and set the theme dynamically based on the system theme, you can use following script:

const systemModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

function switchToMode(targetMode) {
	sessionStorage.setItem("fuselage-sessionStorage-rc-experimental-theme", "true");
	sessionStorage.setItem("fuselage-sessionStorage-rcx-theme", "\"" + targetMode + "\"");
	location.reload()
}

function maybeModeChange() {
	const currentMode = sessionStorage.getItem("fuselage-sessionStorage-rc-experimental-theme");
	
	if (currentMode == null) {
		const systemMode = (systemModeMediaQuery.matches ? 'dark' : 'light');
		switchToMode(systemMode);
	} else {
		//OK
	}	
}

// Trigger initial mode change if necessary
maybeModeChange();

You just need to paste it into Layout -> Custom Scripts -> Custom Script for Logged In Users

Although the official dark mode looks nice to me it may be less feature complete. For example, the admin area looks broken with the official dark mode. So, you may want to use the dark mode from this repository instead.

[geekgonecrazy]

yes for sure! This is why we did go ahead and leave it hidden. We still have several components that need to still be replaced in order for it to have proper coverage across all components.

[pbaity]

That's exciting, @geekgonecrazy ! I really appreciate your and your team's hard work on this. Looking forward to seeing it continue to develop.

[paulchen]

As far as I can see, in Rocket.Chat 6.0.0, the built-in dark mode is available to the general public (i.e. without enabling it in Konami code style).