TV / Highlighted Rows / too little contrast in dark theme

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1904
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

TV / Highlighted Rows / too little contrast in dark theme

Post by jsetzer » 2024-11-03 09:30

Are you using any dark theme and seen this readability problem, too, when selecting one or multiple records:

chrome_6P0YTr18mw.png
chrome_6P0YTr18mw.png (32.5 KiB) Viewed 530 times

The reason is, AppGini uses warning-background-color and warning-text-color from the selected theme for highlighted table rows which, in my case, means grey text on orange background.

This is the relevant CSS style, generated by AppGini code:
chrome_Qexe9abiOw.png
chrome_Qexe9abiOw.png (4.02 KiB) Viewed 530 times

I'm just sharing this small change with you for getting better contrast:

Code: Select all

.highlighted-record * {
    color: white !important;
    background-color: steelblue !important;
}
Put it in any place like <style>...</style> section in hooks/header-extras.php or an external stylesheet file.

This is how it looks like now:

chrome_dOZ2imnACT.png
chrome_dOZ2imnACT.png (35.03 KiB) Viewed 530 times

---

Feel free to replace steelblue by any other (dark) color or change both, background-color and color as you wish.

chrome_gmz7Wn3PA0-ezgif.com-resize.gif
chrome_gmz7Wn3PA0-ezgif.com-resize.gif (216.86 KiB) Viewed 530 times
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 25.10 + all AppGini Helper tools

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1904
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: TV / Highlighted Rows / too little contrast in dark theme

Post by jsetzer » 2024-11-03 10:39

Bugfix

Sorry, I've seen a small bug, use this CSS code instead:

Code: Select all

.highlighted-record > td {
    color: white !important;
    background-color: steelblue !important;
}
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 25.10 + all AppGini Helper tools

User avatar
a.gneady
Site Admin
Posts: 1327
Joined: 2012-09-27 14:46
Contact:

Re: TV / Highlighted Rows / too little contrast in dark theme

Post by a.gneady » 2024-11-03 11:33

Thank you so much Jan for sharing this. Insightful and so helpful as always.
:idea: AppGini plugins to add more power to your apps:

Post Reply