Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme support, for the rambox and all services. #107

Open
seniorivn opened this issue Jul 14, 2016 · 21 comments

Comments

Projects
None yet
@seniorivn
Copy link

commented Jul 14, 2016

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

@saenzramiro

This comment has been minimized.

Copy link
Member

commented Jul 14, 2016

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

This comment has been minimized.

Copy link
Author

commented Jul 19, 2016

@saenzramiro awesome, thank you.

@Spidersouris

This comment has been minimized.

Copy link

commented Aug 5, 2016

+1

2 similar comments
@Stele77

This comment has been minimized.

Copy link

commented Aug 27, 2016

+1

@cryocaustik

This comment has been minimized.

Copy link

commented Oct 7, 2016

+1

@saenzramiro saenzramiro added this to the 1.0.0 milestone Oct 7, 2016

@ylluminate

This comment has been minimized.

Copy link

commented Dec 13, 2016

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

This comment has been minimized.

Copy link

commented Dec 13, 2016

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

This comment has been minimized.

Copy link

commented Dec 13, 2016

That's really nice to know @streetturtle!

@Nifled

This comment has been minimized.

Copy link

commented Dec 14, 2016

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

@PeterDaveHello

This comment has been minimized.

Copy link
Contributor

commented Oct 8, 2017

👍

@streetturtle

This comment has been minimized.

Copy link

commented Feb 5, 2018

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:

screenshot from 2018-02-05 12-20-52

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

This comment has been minimized.

Copy link
Contributor

commented Mar 28, 2018

What about userscripts selection GUI?

@LumKitty

This comment has been minimized.

Copy link

commented Apr 17, 2018

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

This comment has been minimized.

Copy link

commented Apr 17, 2018

@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

This comment has been minimized.

Copy link

commented May 6, 2018

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

@LumKitty

This comment has been minimized.

Copy link

commented Jun 22, 2018

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

This comment has been minimized.

Copy link

commented Aug 23, 2018

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

@tkrauthoff

This comment has been minimized.

Copy link

commented Aug 24, 2018

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

This comment has been minimized.

Copy link

commented Nov 26, 2018

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

This comment has been minimized.

Copy link

commented Feb 1, 2019

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

This comment has been minimized.

Copy link

commented May 8, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.