Rambox Dark Mode overlays

This project leverages the Rambox workspace browser JS code injection feature to load custom styles into enabled services.

ARCHIVED

==============================================================================================

Google Chat and Android SMS web app now include native dark mode. Therefore, this project is no longer needed.

==============================================================================================

Structure

Each supported service has its own folder where

• custom.js is the JS code to inject
• custom.css is the CSS code fetched by said JS.

---

Services How-to

These steps are common to every enabled service inside Rambox.

Step 1. Configure the service

Roll over the supported enabled service name in the right pane and click the cog

Step 2. Open Advanced menu

Click the Advanced accordion menu

Step 3. Paste JS

Copy the lines from the desired service custom.js file and paste them into the Custom Code text box, and click Edit service

Step 4. Reload service

Click Yes and enjoy dark mode!

Sample result for Google Chat service :

Changes are persistent even if Rambox is reopened.

---

Rambox How-to

You can customize the Rambox window itself.

Step 1. Open developer tools

Step 2. Copy-paste JS

Using @redfellow lines from https://github.com/ramboxapp/community-edition/issues/1532

// smaller tabs
document.querySelector('.x-tab-bar').style.maxHeight="41px";
document.querySelector('.x-panel-body').style.top="41px";
document.querySelectorAll('.x-tab').forEach(function(el){el.style.padding='4px';});

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

Press Enter to activate.

Result:

The downside is that you have to do it every time Rambox is reopened.