Franz: [Feature] Adding custom CSS

[Pk13055]

UPDATE: It is possible now to add custom CSS!

• Join the darkside should be set to True. (toggle in your settings)
• Locate your recipes folder (_the folder in which all the service folders exist_)
• Place a CSS file (name it darkmode.css) in the root of each service.
• Enjoy custom themed services!
  Use this site if you have a stylus you want to use: (thanks @LordNacho)
  https://www.cssportal.com/stylus-to-css/

Feature Description

This was referenced before (#268 ), but was never really answered. Is there any way to have a custom CSS overlay over the existing services? I don't want to style Franz per se, but want to use a separate CSS file(s) for individual services.

Motivation and Context

The white background for most apps/services are a sore to look at

Possible adding a service like stylish or enabling custom CSS injection would help alleviate this.

Doesn't really solve a problem, but would be a really convenient thing to have.

Mockups, Screenshots (if available):

[matheusfaustino]

Hi, I'm working on an PR for custom css per service, but I can't find I way to persist the custom CSS, probably because the dev.franz is not expecting an extra field. I'd like to know if there is another way to persist outside the server or if we could change the server to expect an extra field, at least on dev.

First of all, I'm working on a simple implementation that accepts CSS text and apply it to the service's webview. After that, I'd like to add the possibily of searching custom CSS in stylish, for instance, inside the service settings (but that demands more work on UI).

Are you responsible for the repo @adlk? (sorry for ping you, i don't know with who I may talk)

[lolmaus]

Bump. I find this feature to be important. One of the few features that I'm lacking badly.

Stylish Stylus integration would be amazing, but manual CSS copy-paste would be fine too.

[JohnPolanek]

Bump, as I use this especially for slack, so I can make the window small and have the text auto wrap and the sidebar auto close.

[ccioanca]

Bump. As a web dev, i would love this feature since i could reskin ugly services.

[Rygi3l]

Yeah, Stylus integration it's a very good idea.

[matheusfaustino]

The problem is that I can't reach the owner of the project and I don't know what he would like to do about it, maybe he is already working on it, I don't know.

[lolmaus]

The owner has been silent since beta 18 released in April.

In another issue someone said that the author was seriously ill.

[matheusfaustino]

Shit, I hope he's well now.

[JohnPolanek]

Last I see for Stylus is here https://github.com/openstyles/stylus/wiki
and here https://add0n.com/stylus.html#reviews

[yurividal]

This can be done. Just open the folder C:\Users\\AppData\Roaming\Franz\recipes
Open the service you want (example Whatsapp), open the file service.css and paste the custom CSS in there. Save, and relaunch Franz

[adlk]

Not every service comes with a custom css file and this usually needs to be added via the injectCSS api call. But I'm thinking of adding the feature to automatically insert the contents of e.g. a custom.css – if it exists.

[adlk]

For e.g. Dark Mode styles there is already an option in beta 19+. You just need to add a darkmode.css into the folder and then activate the dark mode in the service settings. (reload required)

[JohnPolanek]

I was able to copy my stylish code in that .css file and it worked. Thanks :D

[yurividal]

@adlk thanks! darkmode.css is deffinelty an amazing solution. I have moved the changes i made from custom.css to darkmode.css in all my services. Looks amazing! <3

Keep it up man, thanks for all your work

[adlk]

Great to hear!

If you own the copyright to that css and want to provide the dark mode styles under the MIT license to your fellow Franz-ers, feel free to open a PR on the recipe repositories. ❤️

[yurividal]

Actually i dont. I got the whatsapp ones from https://github.com/vednoc/onyx

[Rygi3l]

Anybody have .css for Facebook Messenger?

[yurividal]

@Rygi3l https://userstyles.org/styles/134433/dark-night-facebook-messenger

[Gaboris]

DARN! I'm trying, but I can't seem to get that Messenger dark theme running.
I saved the code from the link, named it both custom.css and darkmode.css already, put it into my %AppData%\Franz\recipes\messenger\ folder, reloaded and restarted Franz as well, but it didn't change.

Am I doing something wrong or does this feature still need some work for some services?

[adlk]

@Gaboris are you already on b19 or b20? (those are pre-releases) + you need to enable dark mode in service settings.

[Gaboris]

Sure. I'm on b19 and turned dark mode on the second I got the update.
That's actually why I don't get it.

Anyone else got it working?
...
WAIT! I might've I realized the problem? It has a "@-moz-document domain("messenger.com")/[[inbox]]/" part at the beginning. Maybe that's only meant for that Stylish thing? Let's see...
Nope, didn't help. :/

[adlk]

Stylish styles aren't directly css. I've just tried it with the stylish extension and grabbed the inserted css from the page source which worked for WhatsApp.

But at this point, I don't have enough time to look into stylish but it's definitely an interesting option to e.g. enable stylish support in recipes.

[Gaboris]

OH! I did NOT know that Stylish had some custom stuff going on. Okay I got it now. Might actually try it myself and grab the generated style then. Thanks for the clarification. :)

Personally I'd say even a simple "force custom.css on all services" method is good, but the best could be to add code input method into the settings themselves. Either a "file upload" or a plain text area that edits said custom.css file. Heck, I'd say keeping these custom styles saved and synced could be part of your services for paying users.

[nosciencehere]

I've noticed that the dark mode slider only appears on two services for me, when I've tried adding a third the option doesn't show up in services option, even after reloading program. For what its worth, the two services (groupme/fb mesenger) were the two I had before updating, and a new instance of them gives the dark mode option. Wondering if this is known/new.

Also I'm unable to get dark mode to work on either of the above services, but it could be from incorrectly extracting the CSS from stylish, and because of the above I can't test the whatsapp file. If someone would be so kind to post directly to a darkmode.css file verified to work for messenger just so I could rule it out?

[Gaboris]

OH! Oh my good LORD! I did NOT know that dark mode has to be enabled individually for services. I thought the way we were talking about it it was an automatic "IF present in folder AND Franz is in dark mode THEN apply" thing, but NOW it's clear!

The CSS from stylish without the beginning code and ending } is working perfectly for me now! Sorry, but this was NOT obvious. :D

Hey @nosciencehere what did you try so far and on what system? I got the Messenger dark theme off of Stylish and AFTER I figured out that it has to be turned on thanks to you it's working perfectly for me! :)

[nosciencehere]

Ahhhh it was the bracket enclosing everything around the rest of the file. Thank you, messenger and groupme work now.

Other issue still persists.

[LordNacho]

I still don't understand it. I'm on MacOS. What do I need to do to install a dark style for eg Slack?

[LordNacho]

I figured it out for Mac:

The recipes are under ~/Library/Application Support/Franz

Use this site if you have a stylus you want to use:
https://www.cssportal.com/stylus-to-css/

Just stick it in darkmode.css under the appropriate recipe and the Franz UI will magically have a darkmode slider.

Might be worth having that slider appear greyed out regardless of whether the file is there, and add a label explaining this.

[plastikhub]

Does anyone know how to extract a compiled stylesheet or convert a stylesheet with variables into compiled CSS? The style I am trying to use is https://userstyles.org/styles/7339/google-calendar-redesigned-dark-mode. I added the stylesheet into a darkmode.css, choose dark mode on the service and reload. It doesn't apply due to the color variables, and doing a find/replace on every single variable would be a tedious PITA. Any advice welcomed.

So far, I've only been able to get Whatsapp and Messenger to work with darkmode.css.

[lolmaus]

@plastikhub Variables are part of CSS with decent support (spec). Chrome is supporting CSS variables since version 49, while Franz 5.0.0-beta.22 uses Chrome 61. Should be working.

Are non-variable styles applied correctly?

[lolmaus]

@plastikhub You can compile CSS variables here. That was the first Google search result for "compile css variables". Do your homework! 😉

[patillacode]

Adding a darkmode.css under ~/Library/Application Support/Franz/recipes/THE_SERVICE_NAME worked fine for me on v5.0.0b22 but it suddenly stopped working in the latest beta 23 release I just upgraded to.

Had a look at the changelog without success.

Any pointers?

Edit: I forgot that we need to modify the webview.js file too, since it was somehow overwritten on the upgrade, where the injectCSS is called, so:

Franz.injectCSS(path.join(__dirname, 'service.css'));

becomes:

Franz.injectCSS(path.join(__dirname, 'darkmode.css'));

Working as expected now 😄

[Gaboris]

Same here so it's not an individual error.
At first I thought that the update just deleted or overwrote the original CSS, but no, it's the same thing I put there so I guess something broke with the big Electron 4 port. It happens. :)

Keep up the good work! Can't wait to get my dark Messenger back.

[Gaboris]

Huh? I don' remember having to change anything in any webview.js files. I thought we needed to just enable dark mode in the service's setting... Also the webview.js within Messenger hasn't been changed so that doesn't seem to be the problem here... Messenger's also doesn't have any injectCSS() in it so that makes it double not right... Odd.

[patillacode]

In my case, I made it work changing the webview.js file as shown on my previous comment AND also adding the darkmode.css file with my custom style.

I do not use Messenger so I cannot help on that one, but I have done it for both Telegram and Whatsapp.

[LordNacho]

@lolmaus after updating Franz none of my darkmode CSS works anymore. Did something change?

Ah it's that webview.js thing.

Doesn't work on all the recipes. Perhaps there needs to be a way to regularize it?

[plastikhub]

After last update, darkmode.css no longer working for Messenger. Still works with Whatsapp. Tried modifying webview.js to no avail. Any ideas?

[ccioanca]

@plastikhub Created a bug report about this earlier this morning.
See it here and add any additional information you may have: https://github.com/meetfranz/franz/issues/1266

Should this ticket be closed @adlk ? Since we have custom css with darkmode.css?

[LordNacho]

I report the same issue. WhatsApp works, Messenger not. Also Google Calendar, LinkedIn, ans Skype.

[ccioanca]

I noticed the same about Google Calendar, but have not used LinkedIn or Skype.

Either way, we should move this to the issue I've noted above, as it isn't directly related to the requested feature above.

[Pk13055]

Where do we have to inject the darkmode.css for Franz on Linux?

[LordNacho]

Do a find for "whatsapp" or "googlemail" or whatever plugins you know you're using. They will be under a "recipes" folder. Stick the css file in the root of the "whatsapp" or other plugin.

[Vioner]

I don't know about you guys, but even though I got my darkmode.css in ~/.config/franz/recipe/$service - it still doesn't work.

Does it work for you?

I've tried latest beta and stable releases.

[LordNacho]

@Vioner did you change the webview.js as above? Even if you do, it seems to work for some services and not others.

[Gaboris]

@Vioner
Depends on what kind of a CSS are you using. If you just downloaded one from Stylish or something you actually need to edit the beginning of the code a little bit or it won't register for whatever reason.

Also as it was already mentioned some services require code injection for it.

[Vioner]

I thought it injects css with the function already available within Franz - injectCSS:

let path = require(path);
Franz.injectCSS(path.join(__dirname, 'darkmode.css'));

Added to webview.js of a recipe it works just fine - always

Current feature seems incomplete @adlk - could you please explain why you didn't use injectCSS ?
Current feature code

Since the feature is not working as it should, I think the issue needs to be reopened.