Open ransagy opened 6 years ago
vednoc
commented
6 years ago 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
commented
6 years ago I'll try to play with it and report back if i find anything interesting :)
vednoc
commented
6 years ago 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. :smiley:
gokberkakdeniz
commented
6 years ago 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
commented
6 years ago 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. :smile:
tinyCoder32
commented
6 years ago 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
commented
6 years ago 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. :smile:
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! :smiley:
tinyCoder32
commented
6 years ago 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
commented
6 years ago Hey @tinyCoder32, thanks!
I never had an account on AMO but I guess I could make one to support awesome extensions. :+1:
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. :scream: 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. :smiley:
tinyCoder32
commented
6 years ago @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
commented
6 years ago @tinyCoder32, I'm happy to hear that. :smiley:
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. :thinking:
...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
commented
6 years ago @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
commented
6 years ago @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! :smile:
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. :smiley:
tinyCoder32
commented
6 years ago Hey, it's not about adding it or not of course 😀, your point is completely true! the loading time wasn't in my calculations.
I'll see what I can do about that, thanks.
tinyCoder32
commented
6 years ago Hi! I hope that you had time to fix the white bars somehow, because i found another bad white bars in the status page just beside the reply sending arrow.
another thing is that one of my extension users have posted this feature requirement yesterday, and i think it is something related to your great CSS, if you are interested, here is the feature:
https://addons.mozilla.org/en-US/firefox/addon/whatsapp-web-plus/reviews/1203397/
Thanks!
vednoc
commented
6 years ago Hello!
So far the userChrome.css method is the best way to go about changing the look of scrollbars since the most I can do with WebExtensions is hide them with a few hacks, which unfortunately breaks some of the elements and it doesn't look any better in the end. Have you tried jQuery slimScroll yet?
I'm even amazed that status page looks kind of alright considering I rarely use that feature. You can see more at Trello.
another thing is that one of my extension users have posted this feature requirement yesterday, and i think it is something related to your great CSS, if you are interested, here is the feature:
Compact mode already exists and it works wonderfully considering how painful it was to get it right. Narrower contact frame might be a possibility though I can't promise since IIRC if you change that, you also have to change the chat frame and the info frame, including the different combinations of them depending on what you open. Small font size is not going to happen simply because browsers have the ability to zoom in/out and adjust the font that way, and it's better than hard-coding the font size.
Review: I think it's easy for you to change CSS file
Saw the review and I can confirm it's *easy** to change CSS file since you don't need a lot of skill to change colors, remove stuff, etc. But to implement a whole feature (just like I did with the compact mode a while back, as well as other custom settings) that doesn't have a support for it in the first place, is a completely different thing. It doesn't make much sense to implement such complex features since with a single update they can break the functionality for which I've spent hours of my free time to get working properly.
vurtomatic
commented
4 years ago Hi there. I use this theme with an app called Hamsket which takes custom JS that I used to grab from userstyles.org. But the latest CSS is now here and there hasn't been an easy way to convert @vednoc 's CSS to JS for use in Hamsket.
I want to share a "hack" my dev friend just helped me out with. This has worked for me.
// ==UserScript==
// @name Dark-WhatsApp by Vednoc
// @namespace http://userstyles.org
// @description Complete, dark and light, very customizable userstyle for WhatsApp. In very active development on GitHub, check the page to get involved.
// @author Vednoc
// @homepage https://userstyles.org/styles/142096
// @include http://web.whatsapp.com/*
// @include https://web.whatsapp.com/*
// @include http://*.web.whatsapp.com/*
// @include https://*.web.whatsapp.com/*
// @run-at document-start
// @version 0.20200511225006
// ==/UserScript==
(function() {
var css = `
/*Paste all CSS...*/
/*BUT REMOVE @-moz-document domain("web.whatsapp.com")\ { */
/*So the CSS should start with :root */
`;
if (typeof GM_addStyle != "undefined") {
GM_addStyle(css);
} else if (typeof PRO_addStyle != "undefined") {
PRO_addStyle(css);
} else if (typeof addStyle != "undefined") {
addStyle(css);
} else {
var node = document.createElement("style");
node.type = "text/css";
node.appendChild(document.createTextNode(css));
var heads = document.getElementsByTagName("head");
if (heads.length > 0) {
heads[0].appendChild(node);
} else {
// no head yet, stick it whereever
document.documentElement.appendChild(node);
}
}
})();This is the code (Dark-WhatsApp v2.6.3) working on my Hamsket:
Edit: Wrapped code block in <details>.
sheeepdev
commented
3 years ago hi all! after searching for custom themes for whatsapp, i stumbeled across atlus and ended up here. I cant find a way to open developer tools to check css code in atlus, it does allow themeing and it bases of your theme, but if i want to create one for myself, it provides only bg, fg and accent. Would love to somehow edit the application to load an edited version of this theme for whatsapp.
vednoc
commented
3 years ago Hey @sheeepdev!
I'm not sure how to do that for Altus, but I saw you opened an issue over there. Alternatively, you could use Ferdi or Franz to achieve something similar. For more information, check the two ports in credits section in readme to see how it's done.
To get a compiled version of DWA, you can either compile it manually (short guide on the wiki), or configure it using Stylus' configuration menu, then open DevTools, and copy the code from <style id="stylus...> then paste it in the file that's used by Ferdi or Franz. Side note about DevTools:
stylus tag then "Edit as HTML" to get everything, otherwise you'll get a truncated string (this is done to improve performance of DevTools)
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?