Skip to content

Configuration

Jump to bottom Edit New page
E-RELevant edited this page Oct 16, 2020 · 52 revisions

Configuring Dark-WhatsApp

NOTE: This page is updated only when changes are applied to the configuration settings.

  • Last update: Dark-WhatsApp v3.1.0.

Table of Contents

How do I customize UserStyle?

  1. Click on the Stylus extension icon to open the popup on the current page.
    • NOTE: You can also go to the Manager page.
  2. Click on the “Configure” icon () next to the style name to open the dialog.
  3. The dialog will show all the available customizable options.

NOTE: Customizing is available through the UserStyle version of wa.user.styl installed from GitHub.

Element Function
1. Stylus toolbar button Opens popup and shows the number of active styles on the current page
2. Activate style Click to toggle the style on or off
3. Style title Click to toggle the style on or off. Right-click or Wheel-click to open in the editor.
4. Config Usercss Opens a usercss configuration modal within the popup.

For further reading on the subject, please visit the following Stylus wiki pages:

⬆ back to top

Global settings

This section refers to settings that have a general impact on appearance.

UI Font

Defines the default font that the application uses.

  • NOTE: Wrap custom font name around single ' or double quotes ".
Setting Description
Type Text Input
Default 'font-name'
Example 'Arial' 'Monospace' 'Roboto' 'Times New Roman'
Preview

App width

Defines the width of the application.

  • Cannot be greater than the browser’s window resolution.

NOTE: Does not apply when fullscreen mode is enabled.

Setting Description
Type Text Input
Default 1396px
Example 12pt 16px 1em 1rem 1%

Fullscreen mode

Maximize the chat area by removing all the whitespace.

  • Hides the background image.
Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off
Preview

Compact mode

Implement a hacky solution that shrinks the left drawer for responsive design, a.k.a ‘compact mode’.

  • Hover over the left drawer for it to expand.
Setting Description
Type Checkbox (Toggle Switch)
Default On
Options On Off
Preview

Compact mode breakpoint

Defines the maximum window width in which compact mode will be active.

Setting Description
Type Text Input
Default 720px
Example 12pt 16px 1em 1rem 1%

Compact mode hover-on delay

Defines the minimum mouseenter time for the left drawer to expand.

Setting Description
Type Text Input
Default 0.6s
Example 1s 500ms 0s

NOTE: s = seconds; ms = milliseconds; 0s = no delay

Compact mode hover-off delay

Defines the minimum mouseleave time for the left drawer to shrink.

Setting Description
Type Text Input
Default 1.2s
Example 1s 500ms 0s

NOTE: s = seconds; ms = milliseconds; 0s = no delay

Alerts

Allows you to choose the notifications that will appear at the top of the app on the right drawer:

  • Show all: Show all types of alerts.
  • Hide "Allow notifications": Hide “Get notified of new messages” alert while showing others.
  • Hide all: Hide all types of alerts.
Setting Description
Type Option Select (Dropdown)
Default Show all
Options Show all Hide "Allow notifications" Hide all
Preview

Consistent drawer headers

Shows a thinner, unified height header in all drawers.

Setting Description
Type Checkbox (Toggle Switch)
Default On
Options On Off
Preview

Rounded corners for menus

Defines the border-radius of the chat window and context menus.

Setting Description
Type Text Input
Default 4px
Example 12pt 16px 1em 1rem 1%
Preview

Rounded corners for input fields

Defines the border-radius of the input areas.

Setting Description
Type Text Input
Default 4px
Example 12pt 16px 1em 1rem 1%
Preview

Rounded corners for avatars

Defines the border-radius of the avatars.

Setting Description
Type Range Input (Slider)
Default 50%
Range Between 0% to 50%
Preview

App background image

Allows you to choose an app background between:

  • Theme image: Theme background image with fixed blur values (0px/6px/12px)
  • Custom: Custom background image
  • Default: Hard-coded two-color background
  • None: Single-color background

NOTE: Does not apply when fullscreen mode is enabled.

Setting Description
Type Option Select (Dropdown)
Default Theme 12px blur
Options Theme 12px blur Theme 6px blur Theme without blur Custom Default None
Preview

App background image link

Defines the background image URL of the app in the format of url('[URL]').

  • Designed for use with the Custom option.
  • Do not use high-resolution images, otherwise you might experience performance issues.
Setting Description
Type Text Input
Default url('https://images.unsplash.com/photo-1434569117012-ce134ee1a088?fit=crop&w=1280&h=720&q=80')
Example url('http://www.website.com/image.jpg')

NOTE: For your convenience, you can use imgix documentation .

App background image opacity

Defines the opacity percentage of the application background image.

  • Designed for use with Custom option.
Setting Description
Type Range Input (Slider)
Default 0.4
Range Between 0 to 1

App background image blur size

Defines the blur size of the application background image.

  • Designed for use with Custom option.
Setting Description
Type Range Input (Slider)
Default 12px
Range Between 0px to 50px

App background image hue

Defines the hue degree of the application background image.

  • Designed for use with Custom option.
Setting Description
Type Range Input (Slider)
Default 320deg
Range Between 0deg and 360deg

NOTE: deg = degrees

App background image inverted colors

Defines the amount of color inversion of the application background image.

  • Designed for use with Custom option.
Setting Description
Type Range Input (Slider)
Default 0
Range Between 0 to 1

App background image size

Defines the size of the application background image.

  • Designed for use with Custom option.
Setting Description
Type Text Input
Default cover
Example 10px 10px 10% auto cover contain initial inherit

App background image position

Defines the position of the application background image.

  • Designed for use with Custom option.
Setting Description
Type Text Input
Default center
Example left top center center right bottom 10px 10px 10% 10% initial inherit

App background image repeat

Defines if/how the application background image will be repeated.

  • Designed for use with Custom option.
Setting Description
Type Text Input
Default no-repeat
Example repeat repeat-x repeat-y no-repeat space round initial inherit

⬆ back to top

Chat settings

This section refers to settings that affect conversations with contacts and groups.

Message tails

Allows you to choose the message tail style:

  • Default: default message tails
  • Facebook: Facebook chat-style unified rounded message tails
  • Minimal: sharp corner tails
  • Rounded: no tails
Setting Description
Type Option Select (Dropdown)
Default Default
Options Default Facebook Minimal Rounded
Preview

Collapse messages for Facebook tail style

Hides timestamps for all messages except the very last one in each message group.

  • Works only when both the style chosen for message tails is Facebook and RTL options are enabled.
Setting Description
Type Checkbox (Toggle Switch)
Default On
Options On Off
Preview

Incoming message bubble

This section refers to settings that affect the messages received from others.

Override incoming message bubble color

Overrides the default color generator, which enables the option to use a custom bubble color.

Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off

Incoming message bubble color

Defines the color of the messages received from others.

Setting Description
Type Color Swatch
Default (HEX) #383d46
Example rgb(0,0,0,1.0) hsla(0,0%,0%,1.0) #000000
Preview

Swap sides for incoming message bubbles

Defines the side on which other people’s messages appear.

Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off
Preview

Outgoing message bubble

This section refers to settings that affect the messages sent by you.

Override outgoing message bubble color

Overrides the default color generator, which enables the option to use a custom bubble color.

Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off

Outgoing message bubble color

Defines the color of the messages sent by you.

Setting Description
Type Color Swatch
Default (HEX) #2f343d
Example rgb(0,0,0,1.0) hsla(0,0%,0%,1.0) #000000
Preview

Swap sides for outgoing message bubbles

Defines the side on which your messages appear.

Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off
Preview

Blurred contacts/groups

Blur the contacts/groups in the left drawer by default.

  • Hovering your mouse over a contact/group will undo its blurred state.
  • Active chat of a contact/group will remain unblurred all the time.
Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off
Preview

Blurred images/videos/gifs

View the images/videos/gifs in the chat as blurred.

  • Hovering your mouse over a blurred element will undo its blurred state.
Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off
Preview

Blurred images/videos/gifs hover-on delay

Defines the minimum mouseenter time to undo its blurred state.

Setting Description
Type Text Input
Default 0.4s
Example 1s 500ms 0s

NOTE: s = seconds; ms = milliseconds; 0s = no delay

Blurred images/videos/gifs hover-off delay

Defines the minimum mouseleave time for the blurred state to come back.

Setting Description
Type Text Input
Default 0.2s
Example 1s 500ms 0s

NOTE: s = seconds; ms = milliseconds; 0s = no delay

Right-to-left syntax

This section refers to settings that affect and fix the visuals of messages containing right-to-left, top-to-bottom languages.

Remove empty message header

Removes the invisible-space class from messages containing RTL content.

Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off
Preview

Fix formatting for message content

Fixes text formatting for messages containing RTL content.

Setting Description
Type Checkbox (Toggle Switch)
Default Off
Options On Off

Chat background image

Allows you to choose whether to show a custom chat background and how it will look.

Show chat background image

Shows the chat background image.

Setting Description
Type Checkbox (Toggle Switch)
Default On
Options On Off
Preview

Chat background image link

Defines the chat background image URL in the format of url('[URL]').

Setting Description
Type Text Input
Default url('/img/bg-chat-tile_8a055527b27b887521a9f084497d8879.png')
Example url('http://www.website.com/image.png')

Chat background image opacity

Defines the opacity percentage of the chat background image.

Setting Description
Type Range Input (Slider)
Default 0.15
Range Between 0 to 1

Chat background image inverted colors

Defines the amount of color inversion of the chat background image.

Setting Description
Type Range Input (Slider)
Default 0.6
Range Between 0 to 1

Chat background image size

Defines the size of the chat background image.

Setting Description
Type Text Input
Default initial
Example 10px 10px 10% auto cover contain initial inherit

Chat background image position

Defines the position of the chat background image.

Setting Description
Type Text Input
Default top left
Example left top center center right bottom 10px 10px 10% 10% initial inherit

Chat background image repeat

Defines if/how the chat background image will be repeated.

Setting Description
Type Text Input
Default repeat
Example repeat repeat-x repeat-y no-repeat space round initial inherit

Emojis

This section refers to settings that affect the emojis in various places.

Default opacity

Defines the default opacity percentage of the emoji images.

Setting Description
Type Range Input (Slider)
Default 0.8
Range Between 0 to 1

Reduce big emoji size

Shows a unified size of emojis so that they appear the same in all cases (messages consisting of 1, 2, or 3 emojis).

Setting Description
Type Option Select (Dropdown)
Default Default
Options Default Medium Normal Small
Preview

Animate emojis

Animates chat emojis when sent in the chat.

  • Works when sent as a single — big — emoji. E.g.: ❤️
  • Currently supports the following emojis: 🤩, 😍, ☺️,❣️, ♥️, ❤️, 💋
Setting Description
Type Checkbox (Toggle Switch)
Default On
Options On Off
Preview

⬆ back to top

Color settings

This section refers to settings that affect the colors of the application.

REMINDER: For further reading on the subject of the color swatch type, please visit colorpicker popup page on Stylus wiki.

Color-scheme

Allows you to choose between the following predefined colors:

  • Dark blue: hard-coded (v1) color-scheme
  • Dark gray: hard-coded (v2) color-scheme
  • Custom colors: make your own color-scheme
    • Customize base Background, Foreground, and Accent colors
    • 5 extra tones for all base colors will be procedurally generated for use in different areas of the app
    • The default base colors are the same ones from Dark blue color-scheme
Setting Description
Type Option Select (Dropdown)
Default Custom colors
Options Dark blue (v1) Dark gray (v2) Custom colors
Preview

Base background color

Used as a base background-color for the entire application windows, including menus, drawers, active items, borders et cetera.

Setting Description
Type Color Swatch
Default (HEX) #1f232a
Example rgb(0,0,0,1.0) hsla(0,0%,0%,1.0) #000000

Base foreground color

Used as a base for text colors.

Setting Description
Type Color Swatch
Default (HEX) #eeeeee
Example rgb(0,0,0,1.0) hsla(0,0%,0%,1.0) #000000

Base accent color

Used to show things of importance.

Setting Description
Type Color Swatch
Default (HEX) #7289da
Example rgb(0,0,0,1.0) hsla(0,0%,0%,1.0) #000000

Tertiary colors

Used for various small elements.

Setting Description
Type Color Swatch
Default (HEX) Variant
Example rgb(0,0,0,1.0) hsla(0,0%,0%,1.0) #000000

⬆ back to top

Dark-WhatsApp Wiki - © 2020 Dark-WhatsApp Team

Clone this wiki locally