search

vednoc / dark-whatsapp

Complete, dark and light, very customizable theme for WhatsApp.
MIT License
444 stars 50 forks source link

Support for Franz/Ferdi #50

Open nickimola opened 4 years ago

nickimola commented 4 years ago

Hi

I used to use this theme on my custom Franz WhatsApp service (dark WhatsApp) by adding the compiled CSS to it. Is it possible to have a compiled version of the CSS ready to paste without using the stylus variables (using the default values)?

thanks

vednoc commented 4 years ago

It's possible to do but I'd rather not do it now for two reasons:

  1. The upcoming v2 should make it easier. It will not be 100% copy-paste because I want to keep the core customization for basic things such as colors.
  2. I know just a few people that are using, or tried to use, my theme in Franz. Adding another thing that I have to test and update in some special way is quite tedious. If someone else is willing to do it, I'd be happy to add link to the repository in the readme.
nickimola commented 4 years ago

It's possible to do but I'd rather not do it now for two reasons:

  1. The upcoming v2 should make it easier. It will not be 100% copy-paste because I want to keep the core customization for basic things such as colors.
  2. I know just a few people that are using, or tried to use, my theme in Franz. Adding another thing that I have to test and update in some special way is quite tedious. If someone else is willing to do it, I'd be happy to add link to the repository in the readme.

Hi

Thanks for the reply. I might think about creating a fork and adjusting the CSS myself then. Thanks for the effort on creating this styling, it's awesome! :)

vednoc commented 4 years ago

Let me know if you decide to do it and want others to use it as well! :smiley:

Thanks for the effort on creating this styling, it's awesome! :)

I'm happy to hear that. Enjoy. :tada:

dcferreira commented 4 years ago

If anyone is interested, I've been maintaining a CSS file for me to use with Franz. I've been maintaining it on a minimum effort basis, and just for myself, but pull requests are welcome :) https://github.com/dcferreira/franz-themes

As of today it's broken due to #54 but I guess that should be fixed soon.

vednoc commented 4 years ago

As of today it's broken due to #54 but I guess that should be fixed soon.

Fixed now.

Would you like me to add your repo to readme, so people using Franz can find it more easily?

dcferreira commented 4 years ago

Sure, I guess it could help some people. Thanks for the theme btw :)

bkosse commented 4 years ago

Now that 2.0 has been released. Is support for Franz/Ferdi planned? :-)

vednoc commented 4 years ago

Now that 2.0 has been released. Is support for Franz/Ferdi planned? :-)

Yes! The support for USo as well as Franz/Ferdi is planned for v2.1 release coming very soon. I want to get a shell script working so that you can git clone the repository and run the script to convert upcoming wa.user.css into darkmode.css.

Later on, it's likely that I'll further improve the script to convert wa.user.styl to CSS so that you can use some (if not all) custom options outside of Stylus.

kyle-ds commented 4 years ago

How do we compile the CSS you put out into the Franz/Ferdi? I am using dcferreira's repo, but I'm a little bit of a learning-nerd (not versed in this stuff) and i'm trying to learn how we get from your code to dcferreira's compiled code

vednoc commented 4 years ago

How do we compile the CSS you put out into the Franz/Ferdi? I am using dcferreira's repo, but I'm a little bit of a learning-nerd (not versed in this stuff) and i'm trying to learn how we get from your code to dcferreira's compiled code

I'm glad you asked! You need to have Node.js and NPM (or Yarn) installed in order to get the stylus-lang package. After that is done, you need clone this repository and replace the entire UserStyle metadata block in wa.user.styl like so:

Show code ```stylus /* ==UserStyle== @name Dark-WhatsApp Lite @description Non-customizable version of Dark-WhatsApp. @namespace github.com/vednoc/dark-whatsapp @homepageURL https://github.com/vednoc/dark-whatsapp @supportURL https://github.com/vednoc/dark-whatsapp/issues @updateURL https://raw.githubusercontent.com/vednoc/dark-whatsapp/master/wa.user.css @author vednoc (https://github.com/vednoc) @version 2.3.3 @license MIT ==/UserStyle== */ ui_font = 'custom font' radius-g = 4px radius-i = 4px radius-a = 50% app_width = 1396px fullscreen = 0 app_c_m = 1 app_c_m_w = 720px app_c_m_h = 0.6s app_c_m_d = 1.2s chat_b_c = 0 chat_b_img = 0 alerts = show chat_m_t = default chat_left = start chat_b_l = 0 b_l_bg = #3c434f chat_right = end chat_b_r = 0 b_r_bg = #333a47 emoji_t = 1 emoji_o = 0.8 app_image = bg-high image_url = url('https://images.unsplash.com/photo-1434569117012-ce134ee1a088?fit=crop&w=1280&h=720&q=80') bg_opacity = 0.4 bg_blur = 0px bg_hue = 320deg bg_invert = 0 chat_bg = 1 chat_image = url('https://web.whatsapp.com/img/bg-chat-tile_9e8a2898faedb7db9bf5638405cf81ae.png') chat_bg_o = 0.1 chat_bg_i = 0.6 ff_scroll = 1 c_g_c = 1 theme = old dark = #1f232a darken = #252A33 darker = #333943 light = #e9e9e9 lighter = #a1a1a1 accent = #7289da yellow = #e5c512 orange = #df4b16 red = #dc322f magenta = #f33682 violet = #6c71c4 blue = #268bd2 cyan = #2aa198 green = #859900 white = #ffffff sh = #00000025 sh-h = #00000035 ```

This converts UserCSS settings to stylus-lang variables. After that is done, you have to navigate to dark-whatsapp directory in your shell and run stylus command to compile stylus-lang to CSS. The following is the output of Bash shell.

$ pwd
/path/to/dark-whatsapp
$ stylus wa.user.styl -o wa.user.css
compiled wa.user.css
# The next two lines convert `wa.user.css` to `darkmode.css`.
$ chmod +x whatsapp.sh
$ ./whatsapp.sh

And that's it! This way you can customize the stylus-lang vars and produce a customized build of Dark-WhatsApp. If you don't want to install Node.js, you can skip to the last two lines to just convert the wa.user.css file that I provide in all updates. I should work on that script a little bit more.

Let me know if you have any further questions, I'm happy to help. :smiley:

kyle-ds commented 4 years ago

I'm finally coming back to this. I just dumped your wa.user.css (3.0.0r1) into Ferdi minus the @-moz-document domain('web.whatsapp.com') line, and it seems to work. Is that right?

vednoc commented 4 years ago

I'm finally coming back to this. I just dumped your wa.user.css (3.0.0r1) into Ferdi minus the @-moz-document domain('web.whatsapp.com') line, and it seems to work. Is that right?

Yep, that's all you have to do!