Comments (13)
jbwharris
commented on August 23, 2024
26
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; }
}
from hamsket.
notNSANE
commented on August 23, 2024
6
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.
from hamsket.
DrXadium
commented on August 23, 2024
3
Now that rebranding's done, maybe it might be worth revisiting this as other changes are being made?
from hamsket.
jbwharris
commented on August 23, 2024
1
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 }
}
from hamsket.
jbwharris
commented on August 23, 2024
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.
from hamsket.
TheGoddessInari
commented on August 23, 2024
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.
from hamsket.
jbwharris
commented on August 23, 2024
No worries, I just wanted to put this issue back on the map, as it hadn't been mentioned since last year.
from hamsket.
LumKitty
commented on August 23, 2024
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? :)
from hamsket.
LumKitty
commented on August 23, 2024
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/
- Browse to: %LocalAppData%\Local\Programs\Rambox\resources
- Unpack app.asar and then rename it to app-backup.asar or whatever
- Open .\app\resources\Rambox-all.css
- Make whatever theme changes you want by adding them to the bottom of the file. (see below for an example)
- Browse to .\app
- 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 - 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?
from hamsket.
LumKitty
commented on August 23, 2024
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.
from hamsket.
jbwharris
commented on August 23, 2024
Just wanted to mention I did this same thing in the Mac version
- Right click the Hamsket app, choose Show Package Contents
- Navigate to Contents > Resources > app.asar
- Unpack the asar file using Terminal with these instructions
- Navigate to unpacked-asar-folder > resources > Hamsket-all.css and add the styles below
- Repack the asar using asar pack unpacked-asar-folder app.asar
- 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 }
from hamsket.
LumKitty
commented on August 23, 2024
@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 */
from hamsket.
vraravam
commented on August 23, 2024
This would be super-welcome feature for me as well
from hamsket.
Related Issues (20)
- Change service preferences after adding it
- services just disappearing in the void after some time HOT 1
- zoom
- whatsapp barely usable - needs double reload
- Facebook Messenger unread counter not working HOT 2
- WhatsApp is showing a update message and the only way to use it is pressing CTRL+R HOT 2
- gmail login issue : This browser or app may not be secure HOT 2
- No notification badge/counter on google chat HOT 1
- Problem with tray icon missing or low quality HOT 1
- Whatsapp HOT 2
- Browser security level HOT 1
- New release? HOT 1
- Audio is gone HOT 5
- CSP prevents loading icons from localhost with plain HTTP
- Discord screen sharing does not work
- Logo not showing in Tab but showing in "Enabled Services" HOT 1
- It's over? HOT 8
- Don't share screen on Teams HOT 1
- You are currently offline
- Facebook Messenger Only Renders The Top 2 Inches Of the Main Window HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hamsket.