Community-edition: Dark theme support, for the rambox and all services.

[seniorivn]

It could be the killer feature, a lot of people prefer dark themes, and most of the web clients don't have it.

[saenzramiro]

Well, yes. One of the top priorities that I have is to add multiples themes to Rambox, and some will be dark themes.

For services, we have another issue here ( #44 ) to do that. Hopefully, when I decide the app is stable and with minor bugs, I will start doing this enhancements.

[seniorivn]

@saenzramiro awesome, thank you.

[Spidersouris]

+1

[Stele77]

+1

[cryocaustik]

+1

[ylluminate]

Thanks, really looking forward to a dark theme. This will murder Franz, especially since dev on Franz seems stagnant and we can see this moving forward.

[streetturtle]

Just for info, currently you can apply custom css per service (styles could be taken from userstyles.org) using Custom Code feature of Rambox. Simply paste this in Custom Code field in service settings:

function applycss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.appendChild(document.createTextNode(css));
    head.appendChild(s);
 }
applycss(`
// css from userstyles.org without the @-moz-document wrapper
`);

UPD
I created a repo with customizations for services, feel free to add yours.

[ylluminate]

That's really nice to know @streetturtle!

[Nifled]

There's actually a really nice one for Messenger here. Also, one for WhatsApp in case anyone is interested.

[streetturtle]

And to make the top panel dark you can edit the CSS by using the Developer Tools: Window -> Toggle Developer Tools. Then choose Console and paste following JS there:

document.querySelector('.x-tab-bar').style.backgroundColor='#20272D';
document.querySelectorAll('.x-tab').forEach(function(el){el.style.backgroundColor='#40474D';});

First line sets the color of the bar and second of the tabs. Result will look following way:

Note that this will work only until you close application. Every time you start it you'll need to run the above JS again (which is just:

• Ctrl + Shift + i - open developer tools
• up - select previous command
• Enter - run it
• Ctrl + Shift + i - close developer tools

[a2nt]

What about userscripts selection GUI?

[LumKitty]

Can someone tell me where I've gone wrong? I've added the following to FB Messenger in RamBox 0.5.16 and it does nothing:

function applycss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.appendChild(document.createTextNode(css));
    head.appendChild(s);
 }
applycss(`{
/* #141823 is Messenger's normal text colour, white is normal background colour */
/* #1E1E1E and #2D2D30 are Visual Studio, don't ask */

   <snip>
}
`);

[Nifled]

@LumKitty Try removing the parent (top-most) brackets { } that are enclosing the whole actual css. So, something like this:

function applycss(css){
    var head = document.getElementsByTagName('head')[0];
    var s = document.createElement('style');
    s.setAttribute('type', 'text/css');
    s.appendChild(document.createTextNode(css));
    head.appendChild(s);
 }
applycss(`
/* #141823 is Messenger's normal text colour, white is normal background colour */
/* #1E1E1E and #2D2D30 are Visual Studio, don't ask */

  h2, h3, h4, h5, h6
  {
    color: #eee;
  }

 /* ............... Rest of CSS */


/* stuff that should be grey */
  ._ih3, ._3tl0, ._3tl1 ._10w4, ._497p, ._3x6v, ._2v6o, ._3tky, ._5rh4, ._5qsj, ._jf4 ._jf3, ._5i_d .__6m, ._2y8z,
._4g0h, ._3xcx, ._225b, ._3q35, ._2r2v, ._2n1t, ._1n-e, ._3eus, ._2wy4, ._1u5d ._1u5k, ._3ggt,
._17cj ._2ze8, ._17cj ._cen, ._5sr7, ._4nw0
  {
    color: rgba(255, 255, 255, .6) !important;
  }
`);

[LumKitty]

That worked. Sorry for the delay in replying, Thank you!

[LumKitty]

For Windows users, here's a little autohotkey script to start rambox and apply the dark theme, assuming it's in your command history per streetturtle's post:

Run, "C:\Users\lum\AppData\Local\Rambox\Rambox.exe"
WinWait, ahk_exe rambox.exe,,5
Sleep 3000
WinActivate, ahk_exe rambox.exe
Send ^+I
Sleep 4000
WinActivate, ahk_exe rambox.exe
Send {tab}{tab}{tab}{tab}{tab}{tab}{tab}{tab}{tab}{tab}{tab}{tab}{tab}
Sleep 50
Send {up}{enter}
Sleep 50 
Send ^+I

You'll need to point to your own install, and possibly tweak the sleep values. Mine are quite big because RamBox is launching from a startup script.

[yurividal]

anyone got dark whatsapp working? I got dark FB Messenger, but for whatsapp, all css stylesheets i find seem to be broken

[tbsschroeder]

Yes, off course. If you take a style like https://userstyles.org/styles/142096/dark-whatsapp-theme-by-mew, you have not only to remove the sarting end ending brackets, but also teplace all root variables. The styles of userstyles.org are made for a browser plugin which parses the css, but standard css is not able to have variables. For example I got this one: https://pastebin.com/NgSraypN

[jkremser]

inline css works but I found it better to include my css files from an URL, this is my example for slack:

const url1 = 'https://cdn.rawgit.com/laCour/slack-night-mode/master/css/raw/black.css';
const url2 = 'https://raw.githubusercontent.com/Jiri-Kremser/slack-night-mode/overrides/overrides.css';

$.ajax({
   url: url1,
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
  });
  $.ajax({
   url: url2,
   success: function(css) {
     $("<style></style>").appendTo('head').html(css);
   }
  });

[Gby56]

For the folks looking for a good Whatsapp dark theme, here's mine, inspired from Onyx, from Sass to plain css, and ready to copy-paste in the custom code !
You can also change the theme entirely with the /DeepDark colors/ KDE, Discord etc...

https://gist.github.com/Gby56/550b995fd708671879287c1e7de02d85

[ZeryOs]

Have any idea how to run Rambox with custom CSS from the get go?

[Berhart]

And to make the top panel dark you can edit the CSS by using the Developer Tools: Window -> Toggle Developer Tools. Then choose Console and paste following JS there:

document.querySelector('.x-tab-bar').style.backgroundColor='#20272D';
document.querySelectorAll('.x-tab').forEach(function(el){el.style.backgroundColor='#40474D';});

First line sets the color of the bar and second of the tabs. Result will look following way:

Note that this will work only until you close application. Every time you start it you'll need to run the above JS again (which is just:

• Ctrl + Shift + i - open developer tools
• up - select previous command
• Enter - run it
• Ctrl + Shift + i - close developer tools

Hi. As @streetturtle mentioned, I leave here my humble dark theme for rambox (I'm not skilled in CSS but at least I got something). You just have to follow his steps and magic will happen :smile:

document.querySelector('.x-tab-bar').style.backgroundColor='#222';
document.querySelectorAll('.x-tab').forEach(function(el){el.style.backgroundColor='#40474D';});
document.querySelector('.x-toolbar').style.backgroundColor='#222';
document.querySelector('.x-tab-bar-strip').style.backgroundColor='#222';
document.querySelectorAll('.service').forEach(function(el){el.style.borderBottom="solid"; el.style.borderWidth="1px"});
document.querySelectorAll('.x-panel-header-default').forEach(function(el){el.style.color='#f5f5f5'; el.style.backgroundColor='#222'});
document.querySelector('.x-toolbar.x-docked.x-toolbar-default.x-docked-bottom.x-toolbar-docked-bottom.x-toolbar-default-docked-bottom.x-box-layout-ct.x-noborder-rbl').style.backgroundColor='#222';
document.querySelectorAll('.x-panel-body-default').forEach(function(el){el.style.backgroundColor='#222'; el.style.color='#f5f5f5';});
document.querySelectorAll('.x-panel-header-title-default').forEach(function(el){el.style.color='#f5f5f5';});
document.querySelectorAll('.x-grid-item').forEach(function(el){el.style.color='#f5f5f5'; el.style.backgroundColor='#222'});
document.querySelectorAll('.x-grid-group-hd').forEach(function(el){el.style.backgroundColor='#222'}); 

Hope you guys like it. Btw, I also would like to know how to run rambox with a custom css already instead of going to devtools everytime.

[woldtwerk]

Btw, I also would like to know how to run rambox with a custom css already instead of going to devtools everytime.

1. unpack .asar file
2. add your css/js
3. repack it

I did that on my windows machine. Didn't try on mac yet.

[RaptorRob]

Where is the .asar file to be found?

[RaptorRob]

Okay clearly I must be doing something wrong. None of the methods work for any of my services. This is what I put in the advanced tab for WhatsApp for instance. What am I doing wrong?

function applycss(css){
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.appendChild(document.createTextNode(css));
head.appendChild(s);
}
applycss(`

header.pane-header
{
background-color: #2d2d2d !important;
}

#wrapper:before
{
background-color: #5b5b5b !important;
}

body
{
background-image: -webkit-linear-gradient(top,#5b5b5b,#5b5b5b) !important;
font-family: 'Roboto Light',sans-serif !important;
}

.pane-chat-footer
{
background-color: #323232 !important;
}

.chatlist-panel-body,
.chat-drag-cover>.chat,
.contact.chat
{
background-color: #222222 !important;
color: lightgray;
}

.chat
{
background-color: #323232 !important;
border-bottom: 1px solid #323232 !important;
}

.pane-list-body
{
background-color: #323232 !important;
}

.chatlist .chat:after, .chatlist .location:after
{
border-bottom: 1px solid #323232 !important;
}

.subheader-search
{
background-color: #323232 !important;
}

.cont-input-search
{
background-color: #323232 !important;
border: 1px solid #898989 !important;
}

.gif-search-row-input,
.cont-input-search > .input.input.input-search
{
background-color: #323232 !important;
}

.cont-input-search .input-placeholder
{
color: #898989 !important;
}

.subheader-search.active .cont-input-search
{
border-color: #323232 !important;
}

.intro
{
background-color: #323232 !important;
}

.pane-intro:after
{
border-top: 6px solid #323232 !important;
}

.chat-title
{
color: #ffffff !important;
font-weight: bold !important;
}

.chat-status
{
color: #898989 !important;
}

.chat-time
{
color: #898989 !important;
font-size: 10px !important;
}

.chatlist .active.location, .chatlist .chat.active
{
background-color: #2d2d2d !important;
border-bottom: 1px solid #2d2d2d !important;
}

.list-action-alt .list-action-body
{
border-bottom: 0px solid #2d2d2d !important;
color: gray;
}

.list-action:hover,
.chatlist .chat:hover, .chatlist .location:hover
{
background-color: #2d2d2d !important;
border-bottom: 0px solid #2d2d2d !important;
}

.chatlist .chat:hover:before, .chatlist .location:hover:before
{
background-color: #2d2d2d !important;
}

.chatlist .active.location:before, .chatlist .chat.active:before
{
background-color: #2d2d2d !important;
}

.drawer-container-right, .pane-chat
{
background-image: url("data:") !important;
background-color: #323232 !important;
}

.pane-chat-header:after
{
background-color: #2D2D2D;
border-bottom: 0px solid #323232 !important;
}

.subheader-search:after
{
background-color: #323232;
border-bottom: 1px solid #323232 !important;
}
/.sprite-loaded .icon, .sprite-loaded .icon-s, .sprite-loaded .icon-l, .sprite-loaded .icon-xl {background-image: url(http://tbs-gaming.de/design/wa-web/dark/3.0/wa-v=3.0.svg) !important;}/
.message-out
{
background-color: #2d2d2d !important;
}

.message-in
{
background-color: #2d2d2d !important;
}

.document-meta,
.vcard-name,
.message-text
{
color: #898989 !important;
}

.message-datetime
{
color: #646464 !important;
}

.message-out:before
{
background-image: url("data:") !important;
}

.message-in:before
{
background-image: url("data:") !important;
}

#pane-main
{
padding-left: 30px !important;
padding-right: 30px !important;
}

.input
{
color: #e1e1e1 !important;
}

.block-compose .input-container
{
background-color: #696969 !important;
}
/.intro-image {background-image: url(http://tbs-gaming.de/design/wa-web/dark/3.0/wa-v=3.0.png) !important; width: 389px !important; height: 281px !important;}/
.intro-image
{
height: 250px;
width: 250px;
position: relative;
overflow: hidden;
border-radius: 50%;
}

.dropdown
{
background-color: #2d2d2d !important;
}

.dropdown .menu-item a
{
color: #898989 !important;
}

.dropdown .menu-item a:hover
{
background-color: #323232 !important;
}

.menu-tabs-emoji
{
background-color: #2d2d2d !important;
}

.menu-tabs-emoji:before
{
background-color: #e7e7e7 !important;
}

.drawer-header
{
background-color: #2d2d2d !important;
}

.infinite-list.chatlist
{
background-color: #323232 !important;
}

.list-title
{
background-color: #2d2d2d !important;
color: #898989 !important;
}

.chat-title
{
color: #ffffff !important;
}

.header-title
{
color: #898989 !important;
}

.drawer-body
{
background-color: #323232 !important;
}

.drawer-container.drawer-container-left.drawer-container-panel
{
margin-left: -1px !important;
}

.app.three
{
background-color: #323232 !important;
}

.drawer-section.well.animate-enter
{
background-color: #2d2d2d !important;
}
/* .drawer-section-expand.well.animate-enter {background-color: #2d2d2d !important;} */
.well-chat-name,.drawer-section-title
{
color: #ffffff !important;
}

.drawer-section-title .col-side
{
color: #ffffff !important;
}

.drawer-value
{
color: #898989 !important;
}

.drawer-profile .drawer-header
{
background-color: #2d2d2d !important;
}

.drawer-title
{
color: #898989 !important;
}

.chatlist .is-unread .chat-title, .chatlist .is-unread .header-title, .chatlist .is-unread .location-main, .chatlist .unread .chat-title, .chatlist .unread .header-title, .chatlist .unread .location-main
{
color: #2b2b2b !important;
}

.chatlist .is-unread .chat-status, .chatlist .is-unread .header-secondary, .chatlist .is-unread .location-secondary, .chatlist .unread .chat-status, .chatlist .unread .header-secondary, .chatlist .unread .location-secondary
{
color: #898989 !important;
}

.chatlist .active.location:hover, .chatlist .chat.active:hover
{
background-color: #2d2d2d !important;
border-bottom: 1px solid #2d2d2d !important;
}

.chatlist .active.location:hover:before, .chatlist .chat.active:hover:before
{
background-color: #2d2d2d !important;
}

.media-panel
{
background-color: #323232 !important;
}

.media-panel-header
{
background-color: #323232 !important;
}

.media-chat .chat-main, .media-chat .header-main
{
color: #ffffff !important;
}

.chat:hover:not(.active), .location:hover:not(.active)
{
background-color: #323232 !important;
}

.app-wrapper::before
{
background-color: #5b5b5b !important;
}

.media-collection>span
{
background-color: #2d2d2d !important;
}

.drawer-media .drawer-body
{
background-color: #323232 !important;
}

.chat.active .active.location, .chat.active .chat-status, .chat.active .header-secondary, .chat.active .location-secondary
{
color: #898989 !important;
}

.chat-status.ellipsify
{
color: #898989 !important;
}

.block-compose .input-container.disabled
{
background-color: #696969 !important;
}

.media-panel .btn-round
{
background-color: #2d2d2d !important;
}

.menu-tabs-emoji:before
{
background-color: #323232 !important;
}

#window
{
background-color: #2D2D2D !important;
}

#platforms
{
background-color: #2D2D2D !important;
}

.entry-title
{
color: #898989 !important;
}

.entry-subtitle
{
color: #898989 !important;
}

.entry-controls
{
color: #898989 !important;
}

.entry-platform
{
color: #898989 !important;
}

.qrcode
{
border-width: 5px !important;
border-style: solid !important;
border-color: white !important;
}

.app
{
background-image: url("data:") !important;
background-color: #323232 !important;
}

.backdrop
{
background-color: #323232 !important;
}

.popup
{
background-color: #2d2d2d !important;
}

.popup-title
{
color: #898989 !important;
}

.popup-body
{
color: #898989 !important;
}

select
{
color: #898989 !important;
background-color: #2d2d2d !important;
}

.toast
{
background-color: #2d2d2d !important;
color: #898989 !important;
}

.backdrop-transparent
{
background-color: #323232 !important;
}

.header-secondary
{
color: #898989 !important;
}
/.select::before {background-image: url(http://tbs-gaming.de/wa-web/pfeil.svg) !important}/
.drawer .chatlist
{
background-color: #222222 !important;
}

.message-out .audio-track::-webkit-slider-runnable-track
{
background-color: #323232 !important;
}

.message-in .audio-track::-webkit-slider-runnable-track
{
background-color: #323232 !important;
}

.message-out .audio-state-played .audio-progress
{
background-color: #989898 !important;
}

.message-in .audio-state-played .audio-progress
{
background-color: #989898 !important;
}

.message-out .audio-state-played .audio-track::-webkit-slider-thumb
{
background-color: #989898 !important;
}

.message-in .audio-state-played .audio-track::-webkit-slider-thumb
{
background-color: #989898 !important;
}

.message-in .audio-state-default .audio-track::-webkit-slider-thumb
{
background-color: #989898 !important;
}

.message-out .audio-state-default .audio-track::-webkit-slider-thumb
{
background-color: #989898 !important;
}

.message-out .audio-state-default .audio-progress
{
background-color: #989898 !important;
}

.message-in .audio-state-default .audio-progress
{
background-color: #989898 !important;
}
@ font-face
{
font-family: 'Roboto Light' !important;
font-style: normal !important;
font-weight: 400 !important;
src: local('Roboto Light'), local('RobotoLight')/, url(https://tbs-gaming.de/wa-web/Roboto-Light.ttf) format('ttf')/ !important;
}

.media-viewer
{
background-color: #323232 !important;
}

.media-content .btn-round
{
background-color: #2d2d2d !important;
}

.intro-title
{
font-size: 28px !important;
}

.intro-text
{
font-size: 12px !important;
}
/*.meta-audio {
font-size: 10px!important;
}
.bubble-audio .preview {
width: 50px !important;
height: 50px !important;
}
.message-out .audio-status {
left: 44px !important;
bottom: 1px !important;
}
.message-out .bubble-audio .wrapper {
min-height: 38px !important;
}
.message-out .audio {
margin-right: 7px !important;
margin-left: 8px !important;
padding-top: 4px !important;
}
.message-in .audio-status {
right: 44px !important;
bottom: 1px !important;
}
.message-in .bubble-audio .wrapper {
min-height: 38px!important;
}
.message-in .audio {
margin-right: 7px !important;
margin-left: 8px !important;
padding-top: 7px !important;
} */
.message-meta
{
font-size: 10px !important;
}

.message-text
{
font-size: 12.6px !important;
}

.chat-status, .header-secondary, .location-secondary
{
font-size: 13px !important;
}

.chatlist .avatar
{
width: 45px !important;
height: 45px !important;
}

.chat, .location
{
padding: 10px 11px 8px 9px !important;
}
/* .app-wrapper {
min-width: 745px !important;
min-height: 300px !important;
} */
.chat-title, .header-title, .location-main, .drawer-title-body
{
font-size: 14px !important;
}

.chat-status, .header-secondary, .location-secondary
{
font-size: 12px !important;
}

.header-secondary, .pane-chat-header .chat-status, .pane-chat-header .header-secondary, .pane-chat-header .location-secondary
{
font-size: 12px !important;
}

.viewport
{
height: 100% !important;
}

#startup
{
background-color: #5b5b5b !important;
}

a.button.button-contact
{
color: rgb(137, 137, 137) !important;
}

.col-main
{
color: #898989;
}

.input-line
{
background-color: transparent !important;
}

.message-in .btn-context
{
background-color: rgba(41, 41, 41, 0.13);
}

.message-out .btn-context
{
background-color: rgba(41, 41, 41, 0.13);
}

.message .btn-context
{
height: 18px;
}

.three .pane-chat-header
{
border-left: 1px solid #2d2d2d;
}

.pane-chat-header
{
border-left: 1px solid #2d2d2d;
}

.pane-chat-body
{
border-left: 1px solid #323232;
}

.pane-intro
{
border-left: 1px solid #323232;
}

.pane-chat-footer
{
border-left: 1px solid #323232;
}

.three .pane-chat-header
{
border-right: 1px solid #2d2d2d;
}

.three .pane-chat-footer
{
border-right: 1px solid #323232;
}

.three .pane-chat-body
{
box-shadow: inset -1px 0 0 #323232;
}

.message-out .btn-context:after
{
background: -webkit-linear-gradient(left,transparent,rgba(41, 41, 41, 0.13));
background: linear-gradient(to right,transparent,rgba(75, 75, 75, 0.13));
}

.message-in .btn-context:after
{
background: -webkit-linear-gradient(left,transparent,rgba(41, 41, 41, 0.13));
background: linear-gradient(to right,transparent,rgba(75, 75, 75, 0.13));
}

.message .btn-context:after
{
height: 18px;
}

.pane-chat-tile-container
{
background: transparent!important;
}

.pane-chat-tile
{
background-image: url(data:)!important;
}

.app-wrapper::after
{
background-color: #2d2d2d !important;
opacity: 0.72;
}

.round:after
{
background: url(data:) center center no-repeat !important;
}

.popup .text-tip a, .popup .text-tip
{
color: #898989 !important;
}

.drawer-header-small
{
background-color: #2d2d2d !important;
}

.drawer-blocked .list-action
{
background-color: #323232 !important;
color: #898989;
}

.list-action
{
border-bottom: 1px solid #323232;
}
/.bubble-attach .preview-vcard.no-image, .icon-broadcast-default, .icon-group-default, .icon-user-default, .icon-user-default-square {
background-image: url(http://tbs-gaming.de/design/wa-web/dark/dark-avatar.svg) ;
}/
.drawer-header-popup
{
background-color: #2d2d2d;
}

.drawer
{
background-color: #2d2d2d;
}

.drawer .menu-tabs-lists
{
background-color: #2d2d2d;
}

.menu-tabs-lists:before
{
background-color: #60e86f;
}

.drawer .menu-tabs-lists .menu-item
{
color: #898989;
}

.drawer .menu-tabs-lists .menu-item.active
{
color: #898989;
}

.menu-tabs-marker
{
background-color: #60e86f;
}

.chatlist .is-unread .chat-title, .chatlist .is-unread .header-title, .chatlist .is-unread .location-main, .chatlist .unread .chat-title, .chatlist .unread .header-title, .chatlist .unread .location-main
{
color: #ffffff !important;
}

.drawer-header-offset
{
background-color: #2d2d2d !important;
}

.context.context-out
{
background: rgba(220, 248, 198, 0);
}

.context.context-in
{
background: rgba(220, 248, 198, 0);
}

.icon, .icon-s, .icon-l, .context-icon, .icon-status-check, .icon-msg-check,.menu-tabs > .menu-item
{
-webkit-filter: invert(1) !important;
filter: invert(1) !important;
}

.icon-msg-dblcheck-ack, .icon-status-dblcheck-ack, .icon-msg-time, .menu-tab > .icon:not(.icon-emoji-gifs), .icon-forward-chat /, .media-panel-tools>div>span,.media-panel-tools>div>a,.media-panel-tools>div>button/
{
-webkit-filter: invert(0) !important;
filter: invert(0) !important;
}

.drawer-section.well-simple-body,
.media-collection,
.gif-search-gif-wrapper,
.well-simple,
.well
{
background-color: #222;
}

.icon.icon-back-light,
.icon-broadcast-light,
.icon-camera-light,
.icon-checkmark-light,
.icon-checkmark-light-l,
.icon-connection-l-light,
.icon-forward-light,
.icon-gps-light,
.icon-msg-audio-light,
.icon-msg-check-light,
.icon-msg-dblcheck-ack-light,
.icon-msg-dblcheck-light,
.icon-msg-time-light,
.icon-msg-video-light,
.icon-refresh-l-light,
.icon-refresh-light,
.icon-search-light,
.icon-send-light,
.icon-star-light,
.icon-x-alt-light,
.icon-x-light,
.icon-search-morph
{
-webkit-filter: none !important;
filter: none !important;
}
/.gif-search-container,/
.message-list
{
background-color: #1b1b1b !important;
}

header.pane-header
{
background-color: #4c4c4c !important;
}

.drawer-header-small
{
background-color: #4c4c4c !important;
}

.message-in .document-body,
.media-thumb,
.media-thumb > .btn-fill,
.link-preview-container,
.avatar-picker-controls,
.message-system-body,
.media-content .btn-round,
.btn-more,
.incoming-msgs,
.butterbar
{
background-color: #696969 !important;
}

.media-thumb > .btn-fill
{
color: lightgray;
}

.title,
.invalid-media,
.chat-time-title,
.textfield-static,
.button-contact,
.message-system-body,
.butterbar-text,
.butterbar-title
{
color: lightgray !important;
}

.label-text
{
color: gray !important;
}

.media-content .media-caption
{
color: white;
}

.app-wrapper
{
background-color: black !important;
}

.pane-intro
{
background-color: #1b1b1b !important;
}

.pane-chat-empty
{
background-color: #1b1b1b !important;
}

.more
{
background-color: #1b1b1b !important;
}

.icon-msg-dblcheck-ack
{
color: #000;
-webkit-filter: invert(0) brightness(0.8);
filter: invert(0) brightness(0.8);
}

#startup
{
background-color: black !important;
}

.compose-popup-panel,
.link-preview-compose > .btn-background,
.block-compose
{
background-color: #323232;
}

/.message-out>div>.tail-container {
background-image: url("http://i.imgur.com/9dRZY3o.png") !important;
}/

/.message-in>div>.tail-container {
background-image: url("http://i.imgur.com/ZWUktRI.png") !important;
}/
.message-out>div>.tail-container
{
filter: invert(1) grayscale(100%) contrast(73%);
}

.message-in>div>.tail-container
{
filter: invert(1) grayscale(100%) contrast(65%);
}

.multi-controls
{
transform: translateY(0px);
background-color: #323232;
color: #989898;
}

.row-drawer-item .row-body
{
border-bottom: 0px;
}

.media-canvas
{
outline: 0px;
}

`);

[woldtwerk]

I just updated my rambox client and my old custom codes don't work anymore. Either it's broken or something about how to do it changed.

[serovar]

I am trying in every way to get the onyx CSS for WhatsApp to work, but I can't. Do you have any suggestion?

[marius137]

maybe you could integrate that plugin https://github.com/darkreader/darkreader

[milosmns]

document.querySelector('.x-tab-bar').style.backgroundColor='#20272D';
document.querySelectorAll('.x-tab').forEach(function(el){el.style.backgroundColor='#40474D';});

First line sets the color of the bar and second of the tabs. Result will look following way:

@saenzramiro This is absolutely enough. That's dark theme, no need to go crazy.
Light one is the default, dark one is these two lines. 👍

[Vioner]

Hey guys, I've integrated Darkreader to solve this. Works nicely ;)
Check out my PR's description for that https://github.com/ramboxapp/community-edition/issues/107#ref-pullrequest-700376209

[lulupointu]

In the meantime, if you want to add it manually I made a tutorial for those who need.

[HpVaC]

@Nifled i can't get it to wotk on messenger, here is my code, tried with and without the parent brackets

function applycss(css){
var head = document.getElementsByTagName('head')[0];
var s = document.createElement('style');
s.setAttribute('type', 'text/css');
s.appendChild(document.createTextNode(css));
head.appendChild(s);
}
applycss(`
/* #141823 is Messenger's normal text colour, white is normal background colour /
/ #1E1E1E and #2D2D30 are Visual Studio, don't ask */

._6-xo,
h1, h2, h3, h4, h5, h6 {
color: #eee;
}
._5743, ._4rph ._4rpj {
color: white !important;
}
label, ._1wse {
color: #aaa;
}
/* convo search box, to field (new message, add people) /
._2y8y, ._2y8_, ._4jgt, ._5iwm ._58al, ._55r1 {
background-color: #2d2d30 !important;
color: white !important;
}
input._58al {
color: white !important;
}
/ I hate placeholder styling */
input::-moz-placeholder {
color: #ccc !important;
}
input::-webkit-input-placeholder {
color: #888 !important;
}

/* top bars /
._36ic, ._673w {
background-color: rgba(255, 255, 255, .05) !important;
/border-bottom: none !important;/
}
/ main wrapper /
._4sp8 {
background-color: #1e1e1e !important;
color: #eee;
}
/ detail wrapper /
._1t2u {
border-left-color: rgba(255, 255, 255, .1) !important;
}
/ receipient/convo name in top bar /
._17w2 {
color: white !important;
}
/ thread search /
._33p7 {
background-color: rgba(30, 30, 30, 0.9) !important;
}
/ highlighted search results /
.__in {
background-color: rgba(0, 0, 0, 0.3) !important;
box-shadow: 2px 0 rgba(0, 0, 0, 0.3), -2px 0 rgba(0, 0, 0, 0.3) !important;
padding: 1px 0 2px 0; / fix facebook bug /
}
/ event plan banner /
._3nta {
background-color: #2d2d30 !important;
}
._3nta:hover {
background-color: #222 !important;
}
._2n3u {
color: rgba(255, 255, 255, .6) !important;
}
/ XUIButton */
._517h {
background-color: #222 !important;
border-color: rgba(255, 255, 255, 0.5) !important;
color: #ccc !important;
}
._517h:hover {
background-color: #2e2e30 !important;
}
._2615:not(:hover) {
background-color: #333 !important;
}

/* chat area stuff /
/ beginning of convo info /
._llq, ._36zg, ._1n-e._36zg {
color: #eee !important;
}
/ message /
._29_7 ._hh7, ._29_7._-5k ._hh7 {
background-color: #2d2d30;
}
._29_7 ._hh7 {
color: #ddd;
}
._hh7 > ._aok > ._3oh- > a {
color: inherit !important;
}
._hh7._aol {
border-color: transparent !important;
}
._29_7 ._hh7:active, ._-5k ._hh7, ._29_7 ._hh7>span>a:hover {
background-color: #333;
}
/ own message /
._o46._nd_ ._hh7 {
background-color: #365898;
}
._o46._nd_ ._hh7:active, ._o46._nd_._-5k ._hh7 {
background-color: #264888;
}
/ emoji-only messages /
._hh7._2f5r, ._-5k ._hh7._2f5r {
background-color: transparent !important;
}
/ reactions /
._aou {
background-color: #222 !important;
}
._4kf5 {
background-color: transparent !important;
}
/ reply decorator /
._4k7a {
color: #aaa !important;
}
._3egs {
background: transparent !important;
}
/ link info, platform attachment, game leaderboard /
._5i_d, ._5ssp, ._4ea2 {
border-color: rgba(255, 255, 255, .1) !important;
}
.__6k, .__6l, ._5sr2 {
color: #ddd !important;
}
._4u4_ > h3, ._4u4- {
color: #eee !important;
}
/ group polling /
._3b4u {
color: #ddd !important;
}
._3b4h {
background-color: #2d2d30 !important;
}
/ polling message dialog /
._1mr_, ._1mq- {
color: #ddd !important;
}
/ poll checkbox /
._2m5p {
border-color: rgba(255, 255, 255, .1) !important;
}
/ create event plan button /
._3erg ._hh7 a._2q1l {
background-color: #2d2d30 !important;
border-color: #222 !important;
}
/ event share attachment /
._618l {
color: rgba(255, 255, 255, .75) !important;
}
._618n {
color: rgba(255, 255, 255, .6) !important;
}
/ carousel arrow /
._5x5z {
background-color: #1e1e1e !important;
border-color: #444 !important;
}
/ audio message /
._29_7 ._3czg ._2e-7 ._2e-1, ._29_7 ._3czg ._2e-7 ._2e-2 {
background-color: #444 !important;
}
._454y ._1mi- {
background-color: #2d2d30 !important;
}
._454y ._1mj0 {
background-color: #666 !important;
}
._454y ._1mj1 {
border-color: #666 !important;
}
/ media (e.g. GIFs) source /
._2f5n {
background-color: #2d2d30 !important;
}
._2f5n ._29ey {
color: #ccc !important;
}
/ delete bubble button /
._hw2 ._53ij {
background-color: #040404 !important;
}
/ composer /
._5irm._7mkm,
._4rv3, ._4_j4 .chatAttachmentShelf {
background-color: #1e1e1e !important;
border-top-color: rgba(255, 255, 255, .1) !important;
}
.fbNubFlyoutHeader, .fbNubFlyoutBody, .fbNubFlyoutFooter, .fbNubFlyoutAttachments {
background-color: #1e1e1e;
}
/ composer placeholder /
._kmc._7kpg ._1p1t {
color: #aaa !important;
-webkit-text-fill-color: unset !important;
}
/ composer reply /
._67tw {
color: #aaa !important;
}
/ make static stickers slightly more readable /
/
._2poz[style="sticker"] {
background-color: #333;
border-radius: 5px;
}
*/
/ messenger thumb up stickers /
._576q {
-webkit-filter: brightness(75%);
filter: brightness(75%);
}
._576q > svg > rect {
fill: #282828;
}
/ facebook-removed messages et al /
._4sp8 .uiBoxYellow {
background-color: #662;
}
/ code bubbles /
._wu0 {
background-color: #181818 !important;
border-color: #282828 !important;
}
/ new messages notice /
._4zws {
background-color: #444 !important;
}
/ typing indicator */
._4gd0 {
background-color: transparent !important;
}

/* convo info, user list /
._4_j5, ._5l37 {
background-color: #282828 !important;
}
._4_j5 {
border-left: none !important;
}
/ convo name, mute label, user in user list, section headings */
._3eur._6ybk a,
._2jnv,._2jnx,._2jnz,._2jnx ._30e7 ._5j5f, ._3szq, ._364g, ._1lj0, ._8slc {
color: #ddd !important;
}
._87b_, ._7ht_ {
color: #aaa !important;
}

/* convo list /
._li ._1enh {
/ fix convo list hiders /
background-color: #1e1e1e;
}
/ inactive convo /
._1ht1 {
background-color: #222 !important;
}
/ unread convo /
._1ht1._1ht3 {
background-color: #1c2e4a !important;
transition: background-color .5s;
}
/ active convo /
._1ht1._1ht2 {
background-color: #2d2d30 !important;
}
/ convo name /
._1ht6, ._3q34 {
color: #eee !important;
}
/ group chat icon dps /
._57pl, ._57pm {
border-color: transparent !important;
}
/ message request from /
._2kt ._3xsd {
color: #ddd !important;
}
/ timestamp /
._1ht7.timestamp {
color: #999;
}
._1ht3 ._1ht7 {
color: #0084cc !important;
}
/ convo new message /
._1ht3 ._1htf {
color: #ddd !important;
}
/ search header /
._5t4c, ._225b {
background-color: #1e1e1e !important;
}
/ search keyboard selection /
._1k1p {
background-color: #1e1e1e !important;
}
/ people list self online status /
._1u5d {
background-color: transparent !important;
}
/ people list section tabs */
._2lp- {
border-color: #0066aa !important;
}
._48uj {
background-color: #0066aa !important;
}

/* those menus and composer dialogs though /
._53ij, ._54nf, ._293j, ._4lh2 {
background-color: #333 !important;
}
._5r8a._5r8b, ._1uwz, ._3rh0 {
background-color: #222 !important;
}
._2i-c ._54nf ._54nh, ._4lh2, ._5jn1 {
color: #ddd !important;
}
._4lha ._4lhc, ._4lh7 {
color: #aaa !important;
}
._2i-c ._54ne ._54nh, ._2i-c ._54ne ._54nc, ._2i-c ._54ne {
background-color: #0066aa !important;
}
/ more stickers /
._5r8e, ._5r86, ._37wu, ._37wv {
border-color: #222;
}
._eb3::before {
background-color: #222;
}
._3mts .uiScrollableArea.contentAfter::after,
._5r8l .uiScrollableArea.contentAfter::after {
background-image: linear-gradient(transparent, #333);
}
/ sticker search bar /
._2pgc {
background-color: #222 !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
/ sticker and games buttons /
._4rv6, ._4ce_ {
-webkit-filter: invert(1);
filter: invert(1);
opacity: .6 !important;
}
/ plus button expando /
._7mki {
background-color: unset;
}
/ menu dropdown triangles /
._53ik ._53io, ._53il ._53io {
-webkit-filter: brightness(20%);
filter: brightness(20%);
}
/ delivery indicators /
._3i_m ._9ah ._57e_ {
color: #1e1e1e !important;
}
/ misc icons */
._5iwm ._58ak::before,
._fl3:not(._20nb), ._4-0h, ._57gs, label > input + span::before {
-webkit-filter: brightness(80%);
filter: brightness(80%);
}
._23ct, ._2xme,
.sp_-dCYIpyXIre.sx_262edb,
:not(._3no3) > ._uwa, ._5jdr ._5jds,
._5nxe .img, ._2t5t {
-webkit-filter: invert(1);
filter: invert(1);
}
._94py svg path,
._1z_2 svg path,

Settings > path, #compose > path,

Search > path, #bell > path, #reply > path,

message-dots > path,

minus-circle > path,

dots-3-horizontal > g > path,

pencil-underline > g > path,

message-cross > g > path,

caution-triangle > g > path {

fill: #bbb !important;

}

/* messenger dialogs, very important /
._59s7 {
background-color: #222;
color: #eee;
}
._4-hz, ._4eby, ._4jgp ._4jgu, ._12zw {
background-color: #222 !important;
}
._6cs7 {
color: #ccc !important;
}
._4ng2, ._6ct8._6y58,
._374c, ._4jgs, ._2c9i ._19jt, ._51l0 .uiInputLabel .__rm + .uiInputLabelLabel,
._5raa, ._5rab, ._4nv_ {
color: #ddd !important;
}
/ chat emoji picker: selected emoji /
._-lj ._4rlt {
background-color: #333 !important;
border-color: #666 !important;
}
/ reactions list dialog: emoji list /
._koh {
border-bottom-color: #333 !important;
}
._koh > li:not(.selected) {
color: #aaa;
}
/ reactions list dialog: emoji picture overlay /
._3s-4 {
background-color: #222 !important;
}
/ report issue dialog, even more so /
/ dialog head /
._4-i0 {
background-color: #333 !important;
border-bottom-color: #2e2e2e;
}
/ dialog heading, checkbox label /
._4-i0 ._52c9, ._5r5c ._5rq_, ._uvt {
color: #ddd !important;
}
/ dialog body, footer /
div._4-i2, div._5a8u {
background-color: #222 !important;
color: #eee;
}
._4t2a {
background-color: #222;
}
._4-u8 {
background-color: transparent !important;
}
/ event plan dialog: input labels, responses /
._4xd5, ._38wl, ._4x79 {
color: rgba(255, 255, 255, .6) !important;
}
/ image info /
._2zn2 {
color: rgba(255, 255, 255, .4) !important;
}
._2zn6 {
color: rgba(255, 255, 255, .6) !important;
}
/ sticker store /
._5rai {
color: #eee !important;
}
._4-u2 {
border-color: rgba(255, 255, 255, .2) !important;
}
/ what about normal facebook dialogs? */
._t {
background-color: #222 !important;
color: #eee;
}
.fcb {
color: white !important;
}
._c24 {
color: #ccc !important;
}
.uiBoxGray {
background-color: #333 !important;
border-color: #2e2e2e;
}

captcha .captcha_refresh {

color: lightgrey !important;

}

/* login page */
._3v_p, ._3v_o {
background-color: #222 !important;
}
._3v_p ._5hy4, ._3v_o ._5hy4 {
color: #eee !important;
}
._3v_p ._43di, ._3v_o ._43di, ._3v_p ._3403, ._3v_o ._3403 {
color: #ddd !important;
}
._3v_p ._210j ._43dj .uiInputLabelLabel, ._59h8, ._3v_p ._59h7 ._5hy9 {
color: #aaa !important;
}
._3v_p ._3v_w ._2m_r, ._3v_p ._5s4n ._2m_r {
background-color: #0066aa !important;
}

/* call page */
._17cj, ._17cj ._3jne, ._38jq {
background-color: #1e1e1e !important;
}
._17cj ._3jnu, ._17cj ._3jnv, ._fjq {
color: rgba(255, 255, 255, .4) !important;
}
._17cj ._4j_k, ._fjp {
color: #eee !important;
}

/* stuff that should be grey */
._ih3, ._3tl0, ._3tl1 ._10w4, ._497p, ._3x6v, ._2v6o, ._3tky, ._5rh4, ._5qsj, ._jf4 ._jf3, ._5i_d .__6m, ._2y8z,
._4g0h, ._3xcx, ._225b, ._3q35, ._2r2v, ._2n1t, ._1n-e, ._3eus, ._2wy4, ._1u5d ._1u5k, ._3ggt,
._17cj ._2ze8, ._17cj ._cen, ._5sr7, ._4nw0 {
color: rgba(255, 255, 255, .6) !important;
}
`);