Make Converse look more familiar to some users. #1167
This is totally not inspired by https://discordapp.com/ :-° Hopefully
Also I didn’t take much advantage of SCSS variables, so there is a lot
There is also no theme support in Converse yet, we may want to fix that
Wow, thanks a lot for this @linkmauve ! ;-)
Regarding IP/copyrights, if there is a real risk, can we change what we estimate might hurt?
I have the feeling (hopefully neutral) that it looks better! ;-) My opinion is: it definitely looks better!
Another opinion: we have to be careful with "too grey-ish" colors, we might want to present a more colourful look.
Another personal observation, it seems to me that the world separates in two, light vs dark modes... And be careful, lovers/hater seem very opinioniated ;-)
Can you please post a screenshot in mobile mode?
Yes, thanks @linkmauve
Quite a number of people have spoken positively about this change.
Inasmuch as you can edit the variables in
One way would be to use CSS variables instead of Sass. That would mean dropping support for IE11.
The user could then choose a theme themselves, and have Converse automatically update.
I consider this a blocker to merging this PR. The current Sass variables might not be enough, or used properly, but the solution is to fix them, not to ignore them.
Ideally this pull request would just be another variables file, which specifies a different theme.
Concerning what @Nyco wrote:
Depends on the audience. I too prefer more colour, but some people like things darker.
Lastly, I have asked a designer to come up with a new logo for Converse and in the process a new colour scheme.
I expect that a new theme might come from his work, and that this would become the default theme.
However, with support for multiple themes, we can still accommodate this PR and any other themes people wish to submit.
This work was mostly a proof of concept (hence the WIP flag) because it was the most common criticism I heard about Converse after deploying it here and there, it is definitely not intended to be merged as is, but I’m already using it and my users generally prefer it to the current one.
Ignoring SCSS variables was only a way for me to get this done easily, if I do put more work into this the first thing to do will be to extract every place where I used the same colour and make that a variable. I could also try to copy sass/_variables.scss into another file and call it a theme.
As for the theme itself, I don’t especially like it either, I just chose Discord as a model because I’ve heard a lot of gamers use it, one of the communities I helped migrate to XMPP was about game development, and I thought some familiarity would help. Note Nÿco that I didn’t go to the very end of having a clone, the original has support for dark/light themes, a separator between each message and not just different days, etc.
I don’t own a mobile device, so at best I could screenshot Firefox’s devtools in responsive mode, instead you can try JabberFR’s deployment at https://chat.jabberfr.org/ (click on « Rejoindre », “join” in French, for a room you want to test).
I probably won’t work on reworking both themes to use the same SCSS code and only change variables in the few next weeks, but if there is interest in getting this merged before your designer comes up with something I can definitely priorise it more.
This has been rebased on top of #1268, using custom properties instead of hardcoding any value. The two themes can now be toggled just by adding or removing the
I also have a sizing issue between the
This theme takes inspiration from https://discordapp.com/ and builds on top of custom-properties, making the design more familiar to some users. In order to change the theme, add the 'theme-dark' class on #conversejs, you can do it at any point during the lifetime of Converse, either directly in your HTML or by changing the DOM at runtime.