Possibility of using the theme in WhatsApp Desktop?

[ransagy]

I know its not exactly an issue with the theme, which works well in Stylus everywhere, But i was wondering - Did anyone manage to get this theme running in the Desktop app and/or electron apps for the web version?

[vednoc]

I'm curious as well. It should be possible to inject a separate CSS file, which will have to be stripped of custom UserCSS header and made with the custom settings to your personal preference. Another issue that might rise, but it really shouldn't, is if they used a different markup and stylesheets -- if that's the case, the current settings will not work.

[ransagy]

I'll try to play with it and report back if i find anything interesting :)

[vednoc]

Unfortunately they don't have a official version for Linux so I'll have to put Windows in a VM in order to try it for myself. In the meantime, let me know how it goes. 😃

[gokberkakdeniz]

Hi, I made a black themed unofficial whatsapp client with electron by using your usercss. It converts usercss format to pure css (not added in program, just library). Now, it only uses default settings but i will try to implement usercss config screen.

On linux, the notifications works (idk how it works natively), but it does not flash frame (the extension that i used does not work on linux. You may look dev tools, if you want to debug it). Secondly, when you double click tray icon, it should show the window, if it is hidden, but it does not work in linux.

On windows, it flashes frame but does not send notification.

Also, on my and my friend's win10 pc, the app does not start with "electron ." script, so i cannot build app with electron packager.

Tested on Windows 10 1709 & 1803 x64 and Arch Linux + KDE. NodeJS 10.10.0 and Electron 3.0-beta5

repository: https://github.com/tncga/whats-up-darkness

[vednoc]

I tested it on Void Linux and I gotta admit, it looks pretty cool! My knowledge is fairly limited when it comes to Electron apps so I might not be of great help.

It would be quite cool if there was a menu from which you could enable/disable settings found in UserCSS version. Could every option be a separate CSS file that gets injected depending on whether it's enabled or disabled?

Hopefully these issues will get resolved since the prototype is looking good! It might be worth going through documentation and/or switching to a different cross-platform extension.

All in all, thank you for starting this project. I'll lurk around and see if and how I can contribute to it. 😄

[tinyCoder32]

Hello dear @vednoc
I have added your great peace of work to our Firefox add-on, I just didn't find a better place to mention this.

https://addons.mozilla.org/en-US/firefox/addon/whatsapp-web-plus/

[vednoc]

Hi @tinyCoder32!

Sorry for a bit late reply, life kinda got in the way. This is a good place to mention it, don't worry. 😄

I've taken a look at your extension and it looks pretty cool. It would be awesome if you could add a link inside the sidebar in case some of the users want to use a more customizable UserCSS theme. I really like it, good job! 😃

[tinyCoder32]

Sure @vednoc , I promise to do this in the next version god willing.
I'm so happy you liked the extension! I appreciate rating it also if it was really useful to you.

Any idea you have for this I will be so proud to collaborate, thanks!

[vednoc]

Hey @tinyCoder32, thanks!

I never had an account on AMO but I guess I could make one to support awesome extensions. 👍

I'd love to collaborate though I'm not using WhatsApp on my phone due to it being broken; close to two months without a phone. 😱 My only gripe with WhatsApp was the lack of a dark UI. Over time the dark theme evolved into having multiple features -- some of them are mine, others are suggestions from the users.

Perhaps if you put the extension on GitHub you'll get suggestions by the people that use your extension which will give you the chance to refine it even further. There is also the discoverability factor which comes in handy. Currently I'm not sure what would be handy to add, let me know if you already have something in mind. 😃

[tinyCoder32]

@vednoc, thank you for the great suggestion, I would really love to do that.

I have 2 suggestions that I would think of in this case:

1- If I build a simple panel in my extension just for your great dark-ui, to allow the user change the values of the colors, or maybe supply the extension with some "color patterns" that he can switch between, that would be awesome.

2- We MUST change the scroll bars for Firefox users like me, they look bad (at least for me on my Mac), they look very basic white scroll bars, I can simply inject the famous SlimScroll jQuery script that will convert them to a very nice transparent black bars, like you see in this link, because as far as I know, it's impossible to control their design with CSS only??

And then, Is it possible after adding those both suggestions, that you link my extension to your project as a second "how-to-install" method, just beside Stylus?

Please consider the above and let me know what you think, i'm really excited about it.

[vednoc]

@tinyCoder32, I'm happy to hear that. 😃

1- If I build a simple panel in my extension just for your great dark-ui, to allow the user change the values of the colors, or maybe supply the extension with some "color patterns" that he can switch between, that would be awesome.

Indeed! It's easy to change CSS variables but you'll have to implement a menu and a color picker for that. The whats-up-darkness might come in handy. Also I have a theme switcher that's made for Stylus but it has a few color-schemes that I like using, so feel free to take a look.

2- We MUST change the scroll bars for Firefox users like me, they look bad...

I agree. They look really out of place on Firefox and I'm not sure why WhatsApp developers aren't doing anything about them. The idea of loading an entire library for this functionality is kind of something I wouldn't personally do. Perhaps a few CSS hacks might get rid of them, I'll have to do some testing. 🤔

...as far as I know, it's impossible to control their design with CSS only??

That's the case on Firefox v57+ and WebExtensions. Perhaps in the future they will implement that functionality with -moz- prefix to be kind of similar to what we have in Chromium based browsers. It's still possible to change the scrollbar via userChrome.css method (check the link for more info) or with various global GTK themes (which are available only on Linux/BSD systems I believe).

And then, Is it possible after adding those both suggestions, that you link my extension to your project as a second "how-to-install" method, just beside Stylus?

I thought about that a while ago since there are two projects that are using my theme at this moment. Stylus is still going to be the quickest one to get new updates and it's hassle-free for maintenance, apart from all the obfuscated CSS which is a nightmare to work with.

[tinyCoder32]

@vednoc thanks for the infos!

For the scrollbars, good luck with that if it's possible somehow? I don't know have a look, but anyway look at jQuery slimScroll,, it's 1.7KB less than the extension's icon size 😅 so don't worry about that when things get complicated on your side, anyway, please let me know.

I thought about that a while ago since there are two projects that are using my theme at this moment. Stylus is still going to be the quickest one to get new updates and it's hassle-free for maintenance, apart from all the obfuscated CSS which is a nightmare to work with.

For that, it will be possible to load the style directly from the github repo raw file, instead of supplying the css file with the extension, the user will be using the internet anyway, so loading the patterns files from a remote folder will be a great trick to keep the file updated.

Anyway,.. we'll see, thanks!

[vednoc]

@tinyCoder32 I can hide them completely but that's not what we're after. Maybe I'll add an option to disable them since I almost never use scrollbars anyways. Also that jQuery script is really small, wow! 😄

For that, it will be possible to load the style directly from the github repo raw file, instead of supplying the css file with the extension, the user will be using the internet anyway, so loading the patterns files from a remote folder will be a great trick to keep the file updated.

The problem with that is the added delay and that might cause default theme to flash. If you could get the raw file, cache it locally for some time (let's say a day) then it'd be the way to go.

I guess I didn't exactly respond properly in the last message -- I'll add it in "how to install" section as soon as it's ready, so let me know when that happens. 😃