0.5.18?: Add dark theme + toggle to rambox

[TheGoddessInari]

Would require some work, but seems feasible to do for 0.5.18. If other stuff is important enough to delay this a release cycle or two, let me know!

[notNSANE]

as much as I NEEED dark themes in all apps, I think that a cosmetic feature should be put in the back burner while other stuff is more important.

[jbwharris]

I feel this is a need more than a want. Rambox is practically the only thing that doesn't adhere to the macOS dark mode toggle. If Rambox Pro wasn't saas and was just buy a license I'd have probably done it already just for that feature.

[TheGoddessInari]

I'll look into decoupling the theme from the app build itself (another ExtJS-ism) this weekend, but I can't make promises on it for the time being.

[jbwharris]

No worries, I just wanted to put this issue back on the map, as it hadn't been mentioned since last year.

[DrXadium]

Now that rebranding's done, maybe it might be worth revisiting this as other changes are being made?

[LumKitty]

Adding my vote to this.

On the original project, there's a hack posted by Streetturtle here: https://github.com/ramboxapp/community-edition/issues/107#issuecomment-363158680

You can get a dark tab bar by opening the dev console and pasting in some custom JS

Can there a more sensible way to automate that than the silly AutoHotKey script I posted further down? :)

[LumKitty]

Ok, while we wait for an official solution, I've done a hack job that works. You'll need a way to unpack ASAR files. On Windows you can use this 7-zip plugin http://www.tc4shell.com/en/7zip/asar/

1. Browse to: %LocalAppData%\Local\Programs\Rambox\resources
2. Unpack app.asar and then rename it to app-backup.asar or whatever
3. Open .\app\resources\Rambox-all.css
4. Make whatever theme changes you want by adding them to the bottom of the file. (see below for an example)
5. Browse to .\app
6. Pack the contents into a new app.asar file Warning: ensure you don't include the root app folder in the resulting directory structure, just its contents. On windows you would need to: Browse to .\app Select all Right click, 7-zip, add to archive Save as app.asar
7. Copy your new app.asar over the original.

The dark theme I'm using is based on https://github.com/ramboxapp/community-edition/issues/107#issuecomment-524582685 but converted to CSS. Note that I don't really know CSS so may have screwed this up, but it seems to work. The services page is a little ugly, but once set up you'll probably never look at that!

/* Theme */
.x-tab-bar {
	background-color: #222 !important;
}
.x-tab {
	background-color: #40474d !important;
}
.x-toolbar {
	background-color: #222 !important;
}
.x-tab-bar-strip {
	background-color: #222 !important;
}
.service {
	border-bottom: solid !important;
	border-width: 1px;
}
.x-panel-header-default {
	color: #f5f5f5 !important;
	background-color: #222 !important;
}
.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 {
	background-color: #222 !important;
}
.x-panel-body-default {
	color: #f5f5f5 !important;
	background-color: #222 !important;
}
.x-panel-header-title-default {
	color: #f5f5f5 !important;
}
.x-grid-item {
	color: #f5f5f5 !important;
	background-color: #222 !important;
}
.x-grid-group-hd {
	background-color: #222 !important;
}

Perhaps somebody who knows CSS could replace this with a call to an external theme.css file? I don't even know if this is possible! but if it is, could leave a handy hook for theming?

[LumKitty]

For those who don't fancy doing this by hand, here is my modified app.asar from v0.5.20 https://mega.nz/#!DDARxIJJ!X6zQn1vm8eTBuBFbCyGDBMSJRdyj_BbXoI7xKmSBMKg Just copy it into %LocalAppData%\Local\Programs\Rambox\resources or the equivalent location for your OS, replacing the original (you should probably back up the original first!)

This probably won't work for future versions, or if it does it'll downgrade you to 0.5.20 IDK. Use at your own risk etc.

[jbwharris]

Just wanted to mention I did this same thing in the Mac version

1. Right click the Hamsket app, choose Show Package Contents
2. Navigate to Contents > Resources > app.asar
3. Unpack the asar file using Terminal with these instructions
4. Navigate to unpacked-asar-folder > resources > Hamsket-all.css and add the styles below
5. Repack the asar using asar pack unpacked-asar-folder app.asar
6. Replace the old app.asar with the new one in Contents > Resources > app.asar

I tweaked the above CSS a bit. Could use a little more work, but it's pretty functional now. As a trickle down the main settings page is also changed, though it could use some TLC too.

.x-tab-bar { background-color: #222 !important }
.x-tab { background-color: #40474d !important }
.x-toolbar { background-color: #222 !important }
.x-tab-bar-strip { background-color: #222 !important }
.service { border-bottom: solid !important; border-width: 1px }
.x-panel-header-default { color: #f5f5f5 !important; background-color: #222 !important }
.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 { background-color: #222 !important }
.x-panel-body-default { color: #f5f5f5 !important; background-color: #222 !important }
.x-panel-header-title-default { color: #f5f5f5 !important }
.x-grid-item { color: #f5f5f5 !important; background-color: #222 !important }
.x-grid-group-hd { background-color: #222 !important } 
.x-tab-bar-default { background-color: #393939 }
.x-tab-default-bottom { background-color: #2d2c2c }
.x-tab.x-tab-active.x-tab-default { background-color: #222 }
.x-tab.x-tab-active.x-tab-default .x-tab-inner-default { color: #eee }
.x-tab-inner-default { color: #999 }
.x-tab-over.x-tab-default { border-color: #201F1F; background-color: #201F1F }

[LumKitty]

@jbwharris - Thanks for improving my terrible attempt at CSS.

Here's a terrible attempt at doing the Dracula theme, based on said CSS

.x-tab-bar { background-color: #282a36 !important }                              /* Background */
.x-tab { background-color: #44475a !important }                                  /* Selection */
.x-toolbar { background-color: #282a36 !important }                              /* Background */
.x-tab-bar-strip { background-color: #282a36 !important }                        /* Background */
.service { border-bottom: solid !important; border-width: 1px }
.x-panel-header-default { color: #f8f8f2 !important; background-color: #282a36 !important } /* Foreground - Background */
.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 { background-color: #282a36 !important } /* Background */
.x-panel-body-default { color: #f8f8f2 !important; background-color: #282a36 !important }   /* Foreground - Background */
.x-panel-header-title-default { color: #f5f5f5 !important }                      /* Foreground */
.x-grid-item { color: #f5f5f5 !important; background-color: #282a36 !important } /* Foreground - Background */
.x-grid-group-hd { background-color: #282a36 !important }                        /* Background */
.x-tab-bar-default { background-color: #6272a4 }                                 /* Lighter than background */
.x-tab-default-bottom { background-color: #2d2c2c }                              /* Slighty darker than background */
.x-tab.x-tab-active.x-tab-default { background-color: #282a36 }                  /* Background */
.x-tab.x-tab-active.x-tab-default .x-tab-inner-default { color: #f8f8f2 }        /* Very light grey */
.x-tab-inner-default { color: #6272a4 }                                          /* Light Grey */
.x-tab-over.x-tab-default { border-color: #8be9fd; background-color: #8be9fd }   /* Cyan */

[jbwharris]

I was futzing around with this a bit more and found what could be a really good and painless solution to implementing dark mode without actually having to change anything in the app. There is a media query called prefers-color-scheme:dark that I was just able to implement my own styles with, within Hamsket. So it checks what my OS level setting is, then adjusts accordingly. So if someone has settings that change the OS theme via time of day, this would handle showing regular styles and dark at varying times of day with nothing but CSS and the OS handling those decisions.

@media (prefers-color-scheme:dark) {
	html..x-viewport, html.x-viewport>body.x-body { #1D1D1D !important }
	.x-tab-bar { background-color: #222 !important }
	.x-tab { background-color: #40474d !important }
	.x-toolbar { background-color: #222 !important }
	.x-tab-bar-strip { background-color: #222 !important }
	.service { border-bottom: solid !important; border-width: 1px }
	.x-panel-header-default { color: #f5f5f5 !important; background-color: #222 !important }
	.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 { background-color: #222 !important }
	.x-panel-body-default { color: #f5f5f5 !important; background-color: #222 !important }
	.x-panel-header-title-default { color: #f5f5f5 !important }
	.x-grid-item { color: #f5f5f5 !important; background-color: #222 !important }
	.x-grid-group-hd { background-color: #222 !important }
	.x-tab-inner-default { color: #eee; font-weight: 700 }
	.x-tab-bar-default { background-color: #393939 }
	.x-tab-default-bottom { background-color: #2d2c2c }
	.x-tab.x-tab-active.x-tab-default { background-color: #333 !important }
	.x-tab.x-tab-active.x-tab-default .x-tab-inner-default { color: #fff !important }
	.x-tab-inner-default { color: #999 }
	.x-tab-over.x-tab-default { border-color: #201F1F; background-color: #201F1F }
}

[jbwharris]

I took another crack at refining this dark mode CSS. I'd messed up the settings page one of my lines previously, so now it's all styled. I included screenshots of being able able to switch my OS settings from light to dark and Hamsket adhering to the settings. I'm sure it could use some more work for some of the smaller detail things and general CSS optimization, but I think it's a really good start.

@media (prefers-color-scheme:dark) {
	html..x-viewport, html.x-viewport>body.x-body { background: #222 !important; }
	.x-tab-bar, .x-window-header-default-top { background-color: #222 !important }
	.x-tab { background-color: #40474d !important }
	.x-toolbar { background-color: #222 !important }
	.x-tab-bar-strip { background-color: #333 !important }
	.service { border-bottom: 1px solid #333 !important; }
	.service:hover { background: #292929; }
	.x-panel-header-default { color: #f5f5f5 !important; background-color: #222 !important; border-bottom: 1px solid #333 !important; }
	.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 { background-color: #292929 !important }
	.x-panel-body-default { color: #f5f5f5 !important; background-color: #222 !important }
	.x-panel-header-title-default { color: #f5f5f5 !important }
	.x-grid-with-row-lines .x-grid-item, .x-grid-group-hd { border: 1px solid #333 !important; }
	.x-grid-item { color: #f5f5f5 !important; background-color: #222 !important }
	.x-grid-group-hd { background-color: #222 !important }
	.x-tab-inner-default { color: #eee; font-weight: 700; }
	.x-tab-bar-default { background-color: #393939 }
	.x-tab-default-bottom { background-color: #2d2c2c }
	.x-tab.x-tab-active.x-tab-default { background-color: #333 !important }
	.x-tab.x-tab-active.x-tab-default .x-tab-inner-default, .x-window-header-title-default, .x-form-item-label-inner, .x-fieldset-header-default>.x-fieldset-header-text, .x-grid-group-title { color: #fff !important }
	.x-tab-inner-default { color: #999 }
	.x-tab-over.x-tab-default { border-color: #201F1F; background-color: #201F1F }
	.x-box-inner { background: #292929; }
	.x-panel-body-default { background: #222; color: #fff; }
	.x-btn-default-toolbar-small { background-color: #555; color: #eee; border-radius: 0; padding-right: 3px; border-color: #222; }
	.x-btn-over.x-btn-default-toolbar-small { background: #666; }
	.x-btn-inner-default-toolbar-small, .x-btn-icon-el-default-toolbar-small.x-btn-glyph { color: #fff !important; }
	.x-btn.x-btn-menu-active.x-btn-default-toolbar-small, .x-btn.x-btn-pressed.x-btn-default-toolbar-small { background: cornflowerblue; border-color: #222; }
	.x-form-text-default { background: #888; }
	.x-form-trigger-wrap-default { border: 1px solid #333; }
	.x-form-trigger-default { background: transparent; }
}

[vraravam]

This would be super-welcome feature for me as well