FAQ

Friendly Asked Questions

Table of Contents

• Intro
  • Contact, feedback and support
  • What is new in this version?
• New Users
  • What is UserCSS?
  • What is Dark-WhatsApp?
  • What is the difference between the versions?
  • What are the different options for customization and how to use it?
    • Is it only used as a dark theme?
• How to
  • How to install the UserCSS?
  • How to compile Stylus-lang to CSS?
• Issues
  • Why can’t I see the customization options?
  • Why can’t I click on the link under “Keep your phone connected”?
  • Why are there so many errors on style edit page?

Contact, feedback and support

See Dark-WhatsApp wiki home page.

What is new in this version?

• Short change log saved in wiki pages.
• Full change log in commit history.

What is UserCSS?

As it is written at Stylus’ UserCSS wiki page

UserCSS is essentially a CSS stylesheet with some extra data added to the beginning. We add a .user.css / .user.styl extension so you know it’s different.

So what’s all the hype about it?

• Self-hosting: UserCSS styles help to preserve your privacy. A UserCSS style can be hosted and installed from anywhere, even your own drive. That way you can prevent userstyle repository web sites tracking you. We emphasize can preserve as it is dependent on where the UserCSS is hosted.
• User-customizable variables: These style settings (including colorpicker) can be live-switched, are maintained during updates and can be set back to defaults separately.
• Preprocessor: Besides standard CSS, these preprocessors are supported: LESS, Stylus-lang and the USo-format. Furthermore you can utilize whatever you want by using live-reload and your own external editor.

What is Dark-WhatsApp?

Dark-WhatsApp is a custom UserCSS stylesheet made for different styling extensions on web browsers, specifically tailored to the Stylus web extension. It’s designed to be a supplemental mode to the default light theme, allowing each individual to customize the appearance of the WhatsApp Web for their convenience.

What is the difference between the versions?

The Lite version created to be used with extensions that don’t have support for stylus-lang and/or external projects. As such, its purpose is to provide you with the core functionality of Dark-WhatsApp, with no configuration options nor the need to compile it on your own.

If you are not using another third-party extension or want to use the theme for your own project, use the full version.

How to install the UserCSS?

See installation page.

How to compile Stylus-lang to CSS?

1. You need to have Node.js and NPM (or Yarn ) installed in order to get the stylus-lang package. You will also need a POSIX sh compliant shell; in most cases bash will do.
2. Edit the UserCSS options found in the metadata.styl file.
3. Navigate to dark-whatsapp directory in your shell. The following is the output of a Bash shell:

   $ pwd
   /path/to/dark-whatsapp
   
   # Make the script executable.
   $ chmod +x whatsapp.sh
   
   # Print help/usage info.
   # You may also use: (sh|zsh|bash|dash) whatsapp.sh -h
   $ ./whatsapp -h
   
   # Compile custom wa.user.styl to custom.user.css userstyle.
   $ ./whatsapp.sh -c
   
   # Compile custom wa.user.styl to wa.user.css userstyle.
   $ ./whatsapp.sh -cu
   
   # Compile wa.user.styl to wa.user.css and convert a copy of it to
   # darkmode.css for use in Ferdi/Franz/etc.
   $ ./whatsapp.sh -cuf
   
   # Remove generated files.
   $ ./whatsapp.sh -r

Manual pre v3.0.0 way, now no longer needed.

• Clone this repository and replace the entire UserStyle metadata block in wa.user.styl like so:
  • NOTE: This is an example code of Dark-WhatsApp Lite v2.3.3
  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 <[email protected]> (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.
• 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

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 is provided in all updates.

What are the different options for customization and how to use it?

See configuration page.

Is it only used as a dark theme?

Although originally designed to fit a ‘dark mode’, the customization options are extensive and allow the user to select the appropriate color palette for each part of the page: fonts, icons, backgrounds, and more. For further reading on the subject, please visit the configuration page.

Why can’t I see the customization options?

As noted on the configuration page, the option exists only for those who have installed the wa.user.styl UserCSS via GitHub.

Why can’t I click on the link under “Keep your phone connected”?

With the first launch of Whatsapp Web application, the description under “Keep your phone connected” has been adjusted and includes a link with the latest updates. Right now, this is the way we reach the largest audience with the latest updates. Unfortunately, the theme only contains CSS code and cannot affect HTML code. Moreover, it’s a pseudo-element that doesn’t allow text markup.

This is far from optimal and we are still exploring options to improve the user experience. If you have a suggestion on the subject, we would love to hear about it.

Why are there so many errors on the style edit page?

The package that Stylus uses for linting the code doesn’t support stylus-lang therefore everything ends up being an error even though it is valid code. Due to the amount of linting errors the editor will be fairly unresponsive.

Set the CSS Linter to Disabled and all these warnings will be resolved.