Support for Franz/Ferdi

[nickimola]

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]

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]

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]

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

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

I'm happy to hear that. Enjoy. 🎉

[dcferreira]

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]

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]

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

[bkosse]

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

[vednoc]

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]

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]

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

/* ==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 <vednoc@pm.me> (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. 😃