WhatsApp Web

[FrancoRav]

Link to repository

https://github.com/FrancoRav/whatsapp-web.git

Screenshots

Latte

Frappe

Macchiato

Mocha

Espresso

Any additional comments?

No response

Submission Guidelines

• I have read and followed Catppuccin's submission guidelines.

[lighttigerXIV]

Hey, i think the theme looks great. I just wanted to leave a suggestion to make a toggle to switch the received messages background color to surface1. In my case it's hard to read on black unless everything is black too.
This is how it would look like:

Other thing is that links are usually Sapphire color and on hover Teal

Other then that it's a great port :P

[ghostx31]

Great port! One suggestion: Just want to point out that the OLED version is not official (you probably know that already, but just wanted to point that out) and we're calling it Catppuccin Americano on the Discord instead of Espresso, so you might want to change that in the stylus file itself.

[isabelroses]

Hello,
Thanks for the hard work so far I just have some things to add:

Changes:

1. I can imagine this might be hard to change and I am presume this is not intentional
   
2. Most things when they are subsets / subitems should go lighter e.g.
   Document attachment:
   
   Selected chat on default whatsapp:
   
3. Red text for blocking/reporting etc isnt correctly themed see --danger
   Example image:
   
4. Toggles should ideally be theme see example:
   
5. Hovering some buttons looks a bit strange
   example image:
   
6. The download and play buttons look a bit strange (personally i recomend to have them set to a white colour etc
   Examples:
   
   
7. see WhatsApp Web #52 - i agree with this
8. The chat filter button is not themed
   
9. Can we make the checkbox's follow accent?
   
10. Disabled button text isn't following catppucchin theme
    Example image:
    
11. The keyboard shortcuts are not theme
    

Again thanks for your hard work so far. I wish you luck with the tasks I've just added

[FrancoRav]

#52
I'll change the background for incoming messages as soon as I can. Should it be a toggle? Or should it be surface1 as default?
As for the links, I followed the style guide, which at the point I started with the theme suggested Rosewater for Links and URLs. I'll update the links to use Sapphire and Teal

#52

1. Not intentional at all, of course. Just something I saw once but didn't have the time to fix, and completely forgot about it. It's not hard to fix, but it requires defining variables with rgb/rgba (I don't remember right now) values, instead of hex which is what mostly everything else in the UI uses. Not sure if there's a way to convert from hex to rgb directly in css, but I haven't found any. I'll get to it when I have time.
2. Should that be accent (like Reddit's toggles), or just green?
3. What should the colours be for hover buttons?
4. Should that be green background with the foreground in base, or accent background?
5. Disabled buttons uses hsla right now. I'll see how to fix that (also, what should the color for disabled buttons be?)
6. That's something I missed as well. Should be easy to fix though.

For the points I didn't mention, I'm gonna fix them as soon as I can.
Thanks for the feedback!

[isabelroses]

#2025 (comment) I'll change the background for incoming messages as soon as I can. Should it be a toggle? Or should it be surface1 as default? As for the links, I followed the style guide, which at the point I started with the theme suggested Rosewater for Links and URLs. I'll update the links to use Sapphire and Teal

I think surface1 as default, no need for a toggle (up to you though for the toggle)
I think the style guide needs an update to refelect the new view on links.

2. Should that be accent (like Reddit's toggles), or just green?

I recommend accent.

3. What should the colours be for hover buttons?

For hover if its an accent make it lighter or darker up to your disgression. If its a tonal button such as surface0 then you can make it surface1 for example.

4. Should that be green background with the foreground in base, or accent background?

Use curst or mantle.

5. Disabled buttons uses hsla right now. I'll see how to fix that (also, what should the color for disabled buttons be?)

Disabled buttons are usually darker but the text should be something like subtext0 or subtext1

Good luck!

[FrancoRav]

I've made some of the updates. I think surface1 might be too light for incoming messages if we use a lighter tone for subitems, as @isabelroses mentioned, especially in Mocha and Americano (which I forgot to rename, I'll do that now)
For reference, this is Mocha

and this is Americano

Isolated like this it looks okay, but I feel the contrast is a bit too high and incoming messages, especially those with quotes, links or anything attached, are a bit too bright.

These are now the colors for active, hover and the base color for chats in the chat list

Regarding the issues you brought up in #52:

• 2, those specific cases, and also the hover item in dropdown menus, are fixed
• 3, that is using the theme now
• 4, the toggles are using accent when active, and surface when inactive (though the track color for the switch does not change, only the handle. I might fix that when I do the rgb and rgba colors for everything else)
• 6, I changed that, but I probably should change it to text instead of overlay, it's not white enough.
• 7, as mentioned earlier, surface1 might be too bright. Not sure if you agree, or if you think it is okay
• 8, that button is using green as background and crust as foreground now, I can change the background to accent if that makes more sense
• 9, done
• 11, done (except for the button boxes, which use rgba colors, so I will do those later).

I haven't changed 1, 5 and 10 yet, as those need rgb color variables

[isabelroses]

I've made some of the updates. I think surface1 might be too light for incoming messages if we use a lighter tone for subitems

You might be correct maybe make the incoming text's base and their subitems surface0
Everything else LGTM

[FrancoRav]

I've made some of the updates. I think surface1 might be too light for incoming messages if we use a lighter tone for subitems

You might be correct maybe make the incoming text's base and their subitems surface0 Everything else LGTM

Great! I'll change the background for incoming to base and subitems surface0. Maybe I can add a toggle for those who prefer to have it brighter.

As for the others, I have fixed 1 and 5 (although for the button hover 15% darker is a little too much I think, I might change it to 10% and see)

I'll try to fix the disabled buttons when I can, shouldn't be hard I imagine. I just have to get the right hsl for each theme

[isabelroses]

Maybe I can add a toggle for those who prefer to have it brighter.

Nobody will stop you making a toggle by the way so go for it.

[sgoudham]

Note
We are putting userstyle issues on hold while catppuccin/community#4 is being discussed.

[sgoudham]

Hiya 👋

I'm happy to announce that ports which are themed with Stylus (called "Userstyles") now live over at https://github.com/catppuccin/userstyles. This means that your existing work will have to be transformed into a pull request to that repository.

Please follow the documentation detailed here on how to create a userstyle.

I'll be transferring this issue to the userstyles repository as they will not be reviewed here anymore. Thank you for your patience during this process!