Configuration
- Click on the Stylus extension icon.
- Make sure a checkbox is checked.
- Click on the configure icon. It will show the customize style window with 28 customizable options.
This section refers to settings that change general the app appearance.
Allow select one of 7 presets.
| Item | Description |
|---|---|
| Default value | Default |
| Available values |
Default, Spring, Summer, Winter, Autumn, Dream, Office
|
| Notice: | Only the Default preset is fully configurable. Other presets overwrite some options and change their value has no visual effect. If you want full control of the theme - select the Default preset and configure it as you want. To see the option's value of other presets go to a presets settings section. |
| Preview |  |
Allow set a background image.
| Item | Description |
|---|---|
| Default value | null |
| Available values | image URL wrapped single ' or double " quotes |
| Examples | "https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/city.jpg" |
See also additional background section;
Turn dark style - change the emoji, the quick emoji and the reference person windows background colour.
| Item | Description |
|---|---|
| Default value | OFF |
| Available values |
OFF, ON
|
| Notice: | To keep colour consistency use this option together with the WhatsApp native dark mode. |
| Preview |  |
Change layout by separate the contact list and move it to the left.
| Item | Description |
|---|---|
| Default value | OFF |
| Available values |
OFF, ON
|
| Preview |  |
Resize avatar and hide last message preview and date.
| Item | Description |
|---|---|
| Default value | OFF |
| Available values |
OFF, ON
|
| Preview |  |
Hide separate lines between contact items.
| Item | Description |
|---|---|
| Default value | OFF |
| Available values |
OFF, ON
|
| Preview |  |
This section refers to settings that change the sizing of the app elements.
Defines top and bottom margin of the chat window.
| Item | Description |
|---|---|
| Default value | 32px |
| Available values |
4px - 128px
|
| Preview |  |
Defines top and bottom margin of the contact list window.
| Item | Description |
|---|---|
| Default value | 0px |
| Available values |
0px - 128px
|
| Notice: | This option works only when the separate contacts option is ON |
| Preview |  |
Defines width of the chat window.
| Item | Description |
|---|---|
| Default value | 1000px |
| Available values |
480px - 2280px
|
| Notice: | If screen width is lower than 2280px it will be resized until reach screen width. |
| Preview |  |
Defines width of the contact list window.
| Item | Description |
|---|---|
| Default value | 360px |
| Available values |
240px - 500px
|
| Notice: | If screen width is lower than 2280px it will be resized until reach screen width. |
| Preview |  |
Defines border radius of the chat window.
| Item | Description |
|---|---|
| Default value | 16px |
| Available values |
1px - 48px
|
| Preview |  |
Defines top-right and bottom-right border radius of the contact list window.
| Item | Description |
|---|---|
| Default value | 0px |
| Available values |
0px - 48px
|
| Notice: | This option works only when the separate contacts option is ON |
| Preview |  |
Defines blur intensity of the chat window.
| Item | Description |
|---|---|
| Default value | 16px |
| Available values |
1px - 64px
|
| Preview |  |
Defines blur intensity of the contact list window.
| Item | Description |
|---|---|
| Default value | 16px |
| Available values |
1px - 64px
|
| Notice: | This option works only when the separate contacts option is ON |
| Preview |  |
This section refers to settings that change the colours of the app elements.
Defines background colour of the chat window.
| Item | Description |
|---|---|
| Default value | rgba(0, 0, 0, 0.2) |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines background colour of the contact list window.
| Item | Description |
|---|---|
| Default value | rgba(0, 0, 0, 0.2) |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines header colour of the chat window.
| Item | Description |
|---|---|
| Default value | rgba(0, 0, 0, 0.2) |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines header colour of the contact list window.
| Item | Description |
|---|---|
| Default value | rgba(0, 0, 0, 0.2) |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines background colour of the selected contact list item.
| Item | Description |
|---|---|
| Default value | rgba(0, 0, 0, 0.2) |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines left border colour of the selected contact list item.
| Item | Description |
|---|---|
| Default value | #65bfff |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines background colour of the messages sent by you.
| Item | Description |
|---|---|
| Default value | #0e3d55 |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines background colour of the messages received from others.
| Item | Description |
|---|---|
| Default value | #262d31 |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines text colour of the app.
| Item | Description |
|---|---|
| Default value | #ffffff |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Define links colour of the app.
| Item | Description |
|---|---|
| Default value | #68bbe4 |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Defines background colour of the message notification circle.
| Item | Description |
|---|---|
| Default value | #65bfff |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Define colour of the read message marker.
| Item | Description |
|---|---|
| Default value | #65bfff |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Define background colour of the search input and message input.
| Item | Description |
|---|---|
| Default value | rgba(0,0,0,0.2) |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
Define text colour of the search input and message input.
| Item | Description |
|---|---|
| Default value | rgba(255,255,255, 0.9) |
| Available values | any colour in rgba, hsla or hex format. |
| Preview |  |
This section describes the app presets configuration.
This preset is fully configurable and should be used if you want to create your own theme.
If this preset is select only
Dark style,
Height offset - chat,
Height offset - contacts,
Width - chat,
Width - contacts,
Corner smooth - chat,
Corner smooth - contacts,
Blur intensity - chat,
Blur intensity - contacts
option can be changed.
Other options are overwritten by these values:
| Option | Value |
|---|---|
| Bgr image | 'https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/spring.jpg' |
| Separate contacts | ON |
| Reduce contacts | ON |
| Hide contacts separate lines | OFF |
| Bgr colour - chat | rgba(0, 0, 0, 0.3) |
| Bgr colour - contacts | rgba(0, 0, 0, 0.3) |
| Header colour - chat | rgba(0, 0, 0, 0.3) |
| Header colour - contacts | rgba(0, 0, 0, 0.3) |
| Selected contact - bgr | rgba(0, 0, 0, 0.2) |
| Selected contact - mark | #78b30f |
| Message bgr - you | #181818 |
| Message bgr - guest | #222 |
| Text colour | #fff |
| Link colour | #70ddcb |
| Notice colour | #aeea58 |
| Read marker colour | #97e113 |
| Input field bgr | rgba(0, 0, 0, 0.2) |
| Input field text colour | #fff |
If this preset is select only
Dark style,
Height offset - chat,
Height offset - contacts,
Width - chat,
Width - contacts,
Corner smooth - chat,
Corner smooth - contacts,
Blur intensity - chat,
Blur intensity - contacts
option can be changed.
Other options are overwritten by these values:
| Option | Value |
|---|---|
| Bgr image | 'https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/summer.jpg' |
| Separate contacts | ON |
| Reduce contacts | ON |
| Hide contacts separate lines | ON |
| Bgr colour - chat | rgba(0, 0, 0, 0.3) |
| Bgr colour - contacts | rgba(0, 0, 0, 0.3) |
| Header colour - chat | rgba(0, 0, 0, 0.3) |
| Header colour - contacts | rgba(0, 0, 0, 0.3) |
| Selected contact - bgr | rgba(0, 0, 0, 0.2) |
| Selected contact - mark | #fcd7a4 |
| Message bgr - you | #180E18 |
| Message bgr - guest | #261D3C |
| Text colour | #fff |
| Link colour | #E5B19C |
| Notice colour | #c381ff |
| Read marker colour | #c381ff |
| Input field bgr | rgba(0, 0, 0, 0.2) |
| Input field text colour | #fff |
If this preset is select only
Dark style,
Height offset - chat,
Height offset - contacts,
Width - chat,
Width - contacts,
Corner smooth - chat,
Corner smooth - contacts,
Blur intensity - chat,
Blur intensity - contacts
option can be changed.
Other options are overwritten by these values:
| Option | Value |
|---|---|
| Bgr image | 'https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/autumn.jpg' |
| Separate contacts | OFF |
| Reduce contacts | ON |
| Hide contacts separate lines | ON |
| Bgr colour - chat | rgba(0, 0, 0, 0.3) |
| Bgr colour - contacts | rgba(0, 0, 0, 0.3) |
| Header colour - chat | rgba(0, 0, 0, 0.3) |
| Header colour - contacts | rgba(0, 0, 0, 0.3) |
| Selected contact - bgr | rgba(0, 0, 0, 0.2) |
| Selected contact - mark | #c63834 |
| Message bgr - you | #2f2c2c |
| Message bgr - guest | #2b2a2a |
| Text colour | #fff |
| Link colour | #e8716e |
| Notice colour | #f7c673 |
| Read marker colour | #f7c673 |
| Input field bgr | rgba(0, 0, 0, 0.2) |
| Input field text colour | #fff |
If this preset is select only
Dark style,
Height offset - chat,
Height offset - contacts,
Width - chat,
Width - contacts,
Corner smooth - chat,
Corner smooth - contacts,
Blur intensity - chat,
Blur intensity - contacts
option can be changed.
Other options are overwritten by these values:
| Option | Value |
|---|---|
| Bgr image | 'https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/winter.jpg' |
| Separate contacts | OFF |
| Reduce contacts | ON |
| Hide contacts separate lines | OFF |
| Bgr colour - chat | rgba(255, 255, 255, 0.4) |
| Bgr colour - contacts | rgba(255, 255, 255, 0.4) |
| Header colour - chat | rgba(255, 255, 255, 0) |
| Header colour - contacts | rgba(255, 255, 255, 0) |
| Selected contact - bgr | rgba(255, 255, 255, 0.4) |
| Selected contact - mark | #68bbe4 |
| Message bgr - you | #fff |
| Message bgr - guest | #fff |
| Text colour | #313C4C |
| Link colour | #087eb9 |
| Notice colour | #5cc0f2 |
| Read marker colour | #0af |
| Input field bgr | rgba(255, 255, 255, 0.4) |
| Input field text colour | #313C4C |
If this preset is select only
Dark style,
Height offset - chat,
Height offset - contacts,
Width - chat,
Width - contacts,
Corner smooth - chat,
Corner smooth - contacts,
option can be changed.
Other options are overwritten by these values:
| Option | Value |
|---|---|
| Bgr image | 'https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/dream.png' |
| Separate contacts | OFF |
| Reduce contacts | ON |
| Hide contacts separate lines | ON |
| Blur intensity - chat | 1px |
| Blur intensity - contacts | 1px |
| Bgr colour - chat | rgba(255, 255, 255, 0.4) |
| Bgr colour - contacts | rgba(0, 0, 0, 0.3) |
| Header colour - chat | rgba(255, 255, 255, 0) |
| Header colour - contacts | rgba(255, 255, 255, 0) |
| Selected contact - bgr | rgba(255, 255, 255, 0.45) |
| Selected contact - mark | #64d3ff |
| Message bgr - you | #064d73 |
| Message bgr - guest | #400753 |
| Text colour | #fff |
| Link colour | #64d3ff |
| Notice colour | #67b5ee |
| Read marker colour | #65bfff |
| Input field bgr | rgba(0, 0, 0, 0.2) |
| Input field text colour | #fff |
If this preset is select only
Dark style,
Height offset - chat,
Height offset - contacts,
Width - chat,
Width - contacts,
Corner smooth - chat,
Corner smooth - contacts,
option can be changed.
Other options are overwritten by these values:
| Option | Value |
|---|---|
| Bgr image | 'https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/office.jpg' |
| Separate contacts | OFF |
| Reduce contacts | OFF |
| Hide contacts separate lines | OFF |
| Blur intensity - chat | 1px |
| Blur intensity - contacts | 1px |
| Bgr colour - chat | rgba(0, 0, 0, 0.3) |
| Bgr colour - contacts | rgba(0, 0, 0, 0.3) |
| Header colour - chat | rgba(0, 0, 0, 0.0) |
| Header colour - contacts | rgba(0, 0, 0, 0.0) |
| Selected contact - bgr | rgba(0, 0, 0, 0.2) |
| Selected contact - mark | #03b7e1 |
| Message bgr - you | #222 |
| Message bgr - guest | #222 |
| Text colour | #fff |
| Link colour | #03b7e1 |
| Notice colour | #03b7e1 |
| Read marker colour | #03b7e1 |
| Input field bgr | rgba(0, 0, 0, 0.2) |
| Input field text colour | #fff |
Additional background image urls to use as the value of the Bgr image option.
| Image URL | Image source |
|---|---|
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/christmas.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/cookie.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/city.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/dock.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/forest.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/gift.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/lake.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/lemon.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/mountain.jpg" |
image source |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/travel.jpg" |
image source |
Presets background image urls:
| Preset | Image URL | Image source |
|---|---|---|
Default |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/default.jpg" |
image source |
Spring |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/spring.jpg" |
image source |
Summer |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/summer.jpg" |
image source |
Autumn |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/autumn.jpg" |
image source |
Winter |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/winter.jpg" |
image source |
Dream |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/dream.jpg" |
image source |
Office |
"https://raw.githubusercontent.com/DamianSowinski/whatsapp/master/images/office.jpg" |
image source |