Block Highlighting colors bug in light mode

[doopler]

Description

Block Highlighting colors for danger, warn and good are not showing correctly when dashboard is in light mode.

homepage version

v2.6.0

Installation method

Docker

Configuration

No response

Container Logs

No response

Browser Logs

No response

Troubleshooting

in dark mode colors shows correctly

[shamoon]

You can choose your own colors

[doopler]

You can choose your own colors

different colors for light mode and different for dark mode?

[shamoon]

Oh, no, that’s a level of control no one’s ever asked for. Certainly can do it with custom css. Maybe set it for whichever you tend to use and add custom css for the other. If a lot of people want that (specifying different for dark/light) we can always look into it (might be worth a proper feature request if you’re inclined

[doopler]

ok thanks.
my os (macos) is changing theme from light to dark automatically based on time of the day. and i added a custom css and custom js to auto switch between themes in hompage also

i will try to do as you suggested via custom css if it's possible.
thanks for you great work.

[doopler]

@mrx-arafat thanks, thats exactly what i needed 🙏
i ended up with this:

`/* --- LIGHT MODE BLOCK HIGHLIGHT FIXES --- */

/* Good / Success Highlight */
html.light .service-block[data-highlight-level="good"] {
background-color: #66f8ad;
color: #064e3b;
}

/* Warning Highlight */
html.light .service-block[data-highlight-level="warn"] {
background-color: #fef3c7;
color: #78350f;
}

/* Danger / Error Highlight */
html.light .service-block[data-highlight-level="danger"] {
background-color: #ffe4e6;
color: #881337;
}

/* --- DARK MODE BLOCK HIGHLIGHT FIXES --- */

/* Good / Success Highlight */
html.dark .service-block[data-highlight-level="good"] {
background-color: #bdfadb;
color: #064e3b;
}

/* Warning Highlight */
html.dark .service-block[data-highlight-level="warn"] {
background-color: #faf1cd;
color: #78350f;
}

/* Danger / Error Highlight */
html.dark .service-block[data-highlight-level="danger"] {
background-color: #ffd1d4;
color: #881337;
}`

[doopler]

Yep
Thanks

[github-actions[bot]]

This discussion has been automatically closed because it was marked as answered. See our contributing guidelines for more details.