When sending audio messages, the microphone icon is fully white.

The microphone is made in SVG, with two paths: one for the outline (with the same color as the message), and other for the microphone (with the accent color).
After messing with the CSS code, I found a solution:

I was able to use the code to change the color of each path fill.

Here's the code used to set the outer path to the message color:
span:not([data-icon="image"]) > svg > path { fill: var(--darker) !important; }

Here's the code used to set the inner path to the accent color:
span:not([data-icon="image"]) > svg > path:nth-child(2) { fill: var(--accent) !important; }

The second code uses "nth-child(2)" in order to not apply the accent color to the first path.

I'm finding it odd that this doesn't happen in every chat, and maybe this is an issue only I'm having. I tested it in a group, that consists of me alone. It looks like there are some lines in the Night Mode that make the mic outlines be transparent, and it fails to load or act on the group, so I end up with a fully white mic.

Hi Vednoc!

MINOR issue here.

When you search for a contact, or just opens the new chat option, and use the arrow keys to navigate, the selected contact is highlighted in white and the text is set to a color very similar to the highlighted background causing it to be hard to read.

If a chat has the dot to show unread messages, its date will be darker instead white.

This is due to

._2ko65 ._0LqQ {
    color: #333;
}

._2ko65 is shown when the chat is unread.

It would be interesting to see, in a quick glance on the compact window, if someone received your message or not, without having to hover the chat list or opening their messages. This could come up as a configurable option if found bothersome for some people, but it seems that the longest part of the chat list are the messages, not the icons :)

It could work the same way as the unread messages counter, being left over the chat avatar.

Hi, please pay attention to this part when checking who read a message in a group.

Same thing for the documents shared in the group:

Firefox latest on MacOS.

Thanks.

Hi, the "read more" of the long text message should be in the accent color or any other clear color.

Voice messages time has the same issue:

Thanks to @KDASthenerd he reported them and I wrote them on his behalf.

Hey @vednoc,

Me again. Wanted to ask if you could change the background or the text of the plus/minus symbols when uploading a photo. Minor detail.

Many Thanks in Advance,
Aliyss

I've tried to modify the css myself but I don't know enough. The names next to the phone number in groups is pure black color, unreadable against a dark background.

Hey, its me again 😊

the field for linking contacts is still white, see the screenshot.

Apart from that I still love your theme; it is converging towards perfection ❤️

Greetings
Chris

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?

Screenshot: https://imgur.com/mBUgDeX

Sometimes between messages, a random sized space will appear, sometimes as small as one message bubble and other times as big as the whole window. It will disappear after scrolling the chat or changing conversations. Sending a message will sometimes remove this spacing, but many times it just glitches out making even more spaces until eventually coming back to normal.

An example:
https://i.imgur.com/19XPtEL.png
https://i.imgur.com/Tf8jko4.png

Hi. I have a few suggestions and issues to appoint. You wrote that "any sort of contribution is more than welcome", and I'll be very happy if any of my suggestions get to help you in some way.

First of all, I'm mindblown by the capabilities of CSS customization using browser extensions. I've just found out about it and your project fits perfectly with my likes. I might be a novice in terms of HTML and CSS coding, but I've figured a few things out when researching about the issues and I think I've managed to change the code to make things work. I'll include code sections on each suggestion. I also tried to follow your style of comments and structure (I don't even know if it's a common standard). As to where to add the code, I leave it up to you. Without further ado, here are the suggestions:

1. Chat wallpaper.
   I've noticed that you included a TODO comment on this section of your code. After a lot of searching, I found that the YUoyu class has the WhatsApp default "Doodle background", as you call it. As I've always wanted to have chat wallpaper on Web just as it is on mobile, I tried to make it work on this code. (Web allows us to put solid colors as wallpapers, but who wants that?)
   I first created a variable for the wallpaper image, as you did with the background variable --image. The variable i created, --chatwallpaper, is set as the background image of the class _1GX8_. The background size is set to cover, so that it fits the chat div.
   The default doodle wallpaper still appears over the --chatwallpaper image. To avoid this, I simply set the opacity to 0 on the YUoyu class.
   The code inside :root to add the variable:
   --chatwallpaper: url(/* image url here */)

The code for this:

  /* Chat wallpaper. */
  ._1GX8_ {
    /* Set chat wallpaper image. */
    background-image: var(--chatwallpaper) !important;
    /* Set background image to fit to chat area. */
    background-size: cover !important;
  }
  .YUoyu {
    /* Set default WhatsApp chat background's opacity to 0. */
    opacity: 0 !important;
  }

2. Embedded videos missing background color.
   There's an issue that was opened 12 days ago with the exact same title (Issue #25). I gotta say I've arrived in time, and I understand that you might not have answered because not so much time has passed since then. In Issue #25, the person who opened the Issue suggested to add the following code to solve it:
   ._3C3Sj { background-color: var(--light); }
   It works fine, but, following the "dark" name of the theme, I think it's fitting to set the background color to --dark and setting the text color to --light later, which is the exact same thing you did on the sections /* Document embeds. */ and /* Link embeds. */. By the way, the code that I'll suggest can be put inside /* Link embeds. */, but, again, I leave it for you to decide where to put my code. I've worked out the code needed for YouTube and Instagram embedded video links, so I'm not sure it will work with other sites, although it looks like it's a standard since both sites share a few style names on the original style code.
   The code for this:

  /* Video link embeds. */
  ._3C3Sj {
    /* Embedded video link background color */
    background-color: var(--dark) !important;
  }
  ._2a30d {
    /* Instagram video description OR YouTube video title */
    color: var(--light) !important;
  }
  .vFSKE{
    /* YouTube video description. */
    color: var(--light) !important;
  }
  ._37Q6_{
    /* Domain URL. */
    color: var(--light) !important;
  }

P.S.: I've decided to make my own background image on Photoshop, and thought that anyone reading might enjoy it. Here's the link: https://i.imgur.com/WLzE96a.png
There are lines on the top and bottom of the image. I've drawn them to work perfectly on a maximized Google Chrome window with the favorites bar hidden. Put the imgur link in place of the --image variable in order to use it.

The name and status of a contact in a conversation with the contact are unreadable because the text colors are black.

Quick fix is to add this to the code:

/* Name contact */

.app ._3XrHh {
  color: var(--light); }

/* Status contact */

.app ._3sgkv {
  color: var(--light); }

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

I remember this theme used to have blurred chats on the left, (like in the README.md)but haven't seen it for a while now. I decided to do it myself and did it with the following code:

#pane-side > div > div > div > div > div > ._3mMX1 *,
#pane-side > div > div > div > div > div > div:hover * {
	filter: blur(0px) !important;
}

#pane-side > div > div > div > div > div > div > div:nth-child(1),
#pane-side > div > div > div > div > div > div > div > div:nth-child(1) > div:nth-child(1),
#pane-side > div > div > div > div > div > div > div > div:nth-child(2) > div:nth-child(1) {
	filter: blur(6px);
}

It only blurs the ProfilePicture/Avatar, title and lastmessage. It does not blur the unread messages counter, time/date, pinned chats icons on the right. If a chat is selected that one stays unblurred to highlight which chat is open.

I hope this will be added back into the theme!

Edit: screenshot example:

Hey !
At first, let me thank you for the awesome whatsapp theme you have written 😊 ❤️

In the current WhatsApp version the message input field, aswell as the bar you can fold out are currently broken.
For details see my screenshot image

Keep up the good work!
Greetings
chris

The feature: In a conversation, you can click in a contact to invoke "Contact Info" view
Then you can click on the contact photo so it expands showing its full sized version.

The problem: After calling the "Contact Info" view and then clicking in the contact image. The expanded photo doesn't show up at all if you are using this theme.

######Tested on Firefox 63.0.3 (64-bit)

Screenshot: https://i.imgur.com/4hNVLgl.png

Hey there :)
I just wanted to let you know that the "answer close" button is still white, I dont know if you can fix this, so feel free to just close this issue 😊
https://ptpb.pw/6K-S.png
Greetings from Germany
Chris

a bit hard to read here, might have been an issue I made when porting the stylesheet to franz though.

Pretty much what the title says.

Personally, I didn't use the default color-scheme for a very long time. The only reason I kept it for so long is because it is more recognizable than other themes on USo. I haven't seen too many people change the colors, so I'm not sure what to do.

This is what it could look like. Colors go in line with my other themes, but I'm open to changing them.

Vote here!

Hey @vednoc !
I hope you are having a great day! I just saw that the field which appears if you get contacted by someone the first time is not yet themed, for details see the Picture.

Anyways, feel free to make this a "wontfix" since this is really a minor issue 😃

Greetings
Chris

I guess the gif and title are self-explanatory :)

I couldn't easily find the fix for this, but it seems that, on hover at the span icon, it changes some color - couldn't discover where.

The speech bubbles in chat don't change with the colors I've defined. I have tried all settings and even tried to mess around with the CSS, but nothing seems to work.

I'm using the style avaliable when clicking "Install style" (?) on the README.md.

Edit: I used to use the old version (before 17th September), and now I've installed the style on a new machine with the latest update. Not sure if the version has anything to do with it.

After doing a search and clicking on one of the search results, normal behavior is the screen scrolls to that result in chat history and then does a one time pulse to indicate which message the search term is in. On the theme however, there is no indication of which search result is selected. Can you add this?

Hey there @vednoc,

First of all thanks for the theme. Really enjoying it and customizing the css-stuff for my personal use.

Just Wanted to give a Heads-Up that stickers are new to WhatsApp.
So it would look really nice if the time-display could be fixed for that as well, since it is still green.

Many Thanks in Advance and have a great week,
👋 Aliyss

Hi, if you type a slash "/" to use quick replies, the text is unreadable.

Keep up the good work!

Title says it. Since some time to now, the message bubbles are set to a white bacjground, but the text remain light gray, so it is very difficult to read the messages.

I tried to change the css file, trying out --darker or even --dark in Line 970, but it seems that it makes no effect.

Maybe this is just a personal preference, but I feel like mentions ("@person") should be displayed in the accented color. I've just added this to mine:

    .message-in .matched-mention,
    .message-out .matched-mention,
    .message-out .matched-mention .at-symbol {
        color: var(--accent) !important;
    }

When forwarding messages, the little italic text up on the message box 'Forwarded' doesn't have a good contrast. Just adding this:
._15aTv{ color: var(--lighter); }
will solve it.

Selected text has blue background and white foreground but the shades make it impossible to read the selected text. This needs to be fixed.

Everything else is great (:

There are white areas on Night Mode. Here's where I found them:

When sharing contacts, I first select what contacts to share. After that, WhatsApp Web asks if you confirm to send the contact card: "Send 1 contact to <contact/group>?" In that same screen are some sections with white background.

The contact photo and name division already has the right color, but only when hovering the pointer. The background color is not set to dark. This is the div's classes: _2UaNq _3Ff9z

The contact number and message icon is white. This is the div's class: _1VwzF

Emoji menu is partially affected too

Thanks!

https://github.com/vednoc/onyx/blob/77bccec3b71aedadbb1cb35ddf8a433f0b3104ff/WhatsApp.user.css#L735-L740

Changing it to not include "selectable-text" and include "strong" will make links recognizable in chat.
Also making "a" color important will also highlight them in chat description and link search

1- On compact mode, there's no unread badge on the corner of the chat's image. It does show when hovering the chat list
https://i.imgur.com/HCljqDa.png
https://i.imgur.com/Tk4r7od.png

2- There's no animation when expanding the compact list, it's only compacted or expanded, also there's a long delay for the chat list to expand after hovering

3- Window proportions are a bit off. Before I could have a small square window (about the same size as the image), now the smaller size before the scrollbars appear is a larger rectangle. Also when sharing an image, the preview window is smaller than the chat window.
https://i.imgur.com/xiDyH5I.png
https://i.imgur.com/MuwXWG1.png

Probably a new whatsapp feature, so is missing a background.

._3C3Sj { background-color: var(--light); }

This should solve, i guess.

To make the scrollbar blends well with dark UI:

  ._2nmDZ {
    scrollbar-color: var(--light) var(--dark);
    scrollbar-width: thin;
  }
  ._1NrpZ {
    scrollbar-color: var(--light) var(--darker);
    scrollbar-width: thin;                
  }

Background color of downloadable content.

Can be fixed with:

._1mrMQ{
    background-color: var(--dark) !important;
}

Font color of input box while adding people to a group

Can be fixed with:

._44uDJ {
    color:var(--light);
}

Font color of error message while uploading invalid File Types e.g. a folder.

Can be fixed with:

.azEEh{
    color:var(--light);
}

Looks like this issue is similiar to #25. File uploads lacks the custom background color, check this out:

By the way, thanks a lot for this theme, it's awesome!

Always I use your theme with Franz App https://meetfranz.com/ Works perfectly the version 1.4.3.
The new version, not working when I paste the code. Can you help me or tell me how can I use the new version in Franz?
Also the version 1.4.3 have problems with the scan code.

Thanks for read and your time and excellent work, I love your theme!

Hi, of course, I should also say it again that i'm impressed with what you did.

There is something to consider fixing please:

Docs files and the download button.

Thank you so much for this perfect work!

When someone sends a contact as attachment inside a conversation, the contact's name and number are unreadable, because are the same color as background.

(This is after selecting the text)

After forwarding a message, open the info and look for forward counter. It's white with grey text.

Similar to the issue described in #19
But only relevant for when someone is quoted - only then the name is shown in black.
(Names in normal messages outside of quotes are shown correctly)
screenshot to show the issue:
https://imgur.com/GVq5TOa

WhatsApp Web 0.3.2276
WhatsApp by Mew v1.3.0

Been using this theme on web for a while and it's amazing.

I've just started using Franz which allows users to add their own styling for dark themes, tried applying this one and it doesn't seem to mesh too well in its current form. There's an existing dark theme https://github.com/bloodf/franz-dark-whatsapp which looks suspiciously like an older version of this one.

Wondering if anyone else has it working?