What CSS colour vals should I be using from dark/light modes in Hive?

Bloke · 2025-04-11 17:02:34

I’ve added a third party select list editor called Choices.js to integrate with glz_cf to make loooong select lists manageable for people adding many to an article. All good. It’s not the best plugin I’ve ever laid eyes on, but it’ll do.

Anyway, the problem is it only seems to work in Light mode. As soon as nightfall comes and the browser/Hive (Neutral) switches, the light grey text on a white box background is impossible to read. There’s an open issue for a dark theme but no traction since late last year.

So I thought I’d hack the CSS file to use our colour names, in the hope that they switch automatically. But I don’t know which ones to use (or where best to apply them). I located a few divs in their style sheet via the inspector and tried using background-color: --clr-bkgd; instead of the hard-coded values they had originally. That seemed to sort of work last night and switched the background of the text box to dark, allowing the blue-grey text to show up. And it switched nicely in the day.

But there’s also an overlay in a ruleset .choices__list--dropdown, .choices__list[aria-expanded] for when you click the select box and it pops up the list allowing you to search and select. If I change the background-color value there to the same value --clr-bkgd the inspector crosses it out and issues a warning “Invalid property value”. Further, because it’s done that, the element has no background at all and the text is therefore unreadable as it overlays the stuff underneath it, which shows through. It’s weird: it allows me to use that value in other selectors, just not this particular div overlay.

If I try a static value like black it’s fine, but then in daylight hours, that still shows up with a black background and I don’t want that. Are there any color values from core/Hive I should be using that will auto-switch? I tried --txp-primary-back too but it also claimed it was an invalid property value. Kind of at the limit of my knowledge here with CSS.

—

BTW, if anyone has any recommendations for better plugins to help people search, filter and select/remove multiple items from long select lists (2000+ entries), I’d love to hear them. I’ve tried Select2 and Selectize and they both suffer from the dark mode problem above (and their CSS was even more impenetrable to me). Also, all such plugins I found so far seem to be massive, kitchen sink plugins, like ~100KB+ of JS and CSS, which is madness! Ideally I’d like a more lightweight solution, but appreciate combo search/filter boxes are difficult to code.

From a UX perspective, pulling the selected values out to show them separately with a little ‘x’ by each one is great for a small number of selected items, but some of these articles will have upward of 50 items selected. Scrolling past the selected items to get to the search filter every time starts to get as annoying as having to hunt for them in the dropdown in a regular select list!

Maybe a select list isn’t the best tool for the job at all. Any thoughts on suitable UI widgets to help someone rapidly filter/find and assign a bunch of items in a custom field from a massive list will be considered.

Last edited by Bloke (2025-04-11 17:09:15)

phiw13 · 2025-04-12 03:19:29

Simplify your life: Apple menu > System settings > Appearance: set to ”light”. :-)

Based on their demo page;

I think this is the selector that sets the background-color: .choices__list--dropdown, .choices__list[aria-expanded], but then there is this as well: .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted

The color is inherited from the a parent div.section; you can set (lock) it on the first selector above There seems some opacity change triggered somewhere, no idea where though.

Maybe this could save the day?

.choices__list--dropdown, .choices__list[aria-expanded],
.choices__list--dropdown, .choices__list[aria-expanded] * { 
  color: black !important; 
  background: hsl(0 5% 95%) !important; /* off-white */
  opacity: 1 !important;
}

No idea if the Hive variables would work or not. Is that Textpattern 4.8 or 4.9 ?

Bloke · 2025-04-12 05:41:55

Thanks. I’ll try that later. Won’t that always be the same colour though, even in dark mode? Or does it switch somehow and override that important rule?

Yes this is 4.9.0, sorry. Should have said.

phiw13 · 2025-04-12 05:56:46

Yes, it will be. You can replace black above with red or any other strong color for testing, essuyé to recognize. If it works you then can try with the core variables.

Bloke · 2025-04-12 10:31:31

Okay, if I modify this rule as follows:

.choices__list--dropdown,
.choices__list[aria-expanded] {
  display:none;
  z-index:1;
  position:absolute;
  width:100%;
  border:1px solid #ddd;
  top:100%;
  margin-top:-1px;
  border-bottom-left-radius:2.5px;
  border-bottom-right-radius:2.5px;
  overflow:hidden;
  word-break:break-all;
  color: black !important; 
  background: hsl(0 5% 95%) !important;
  opacity: 1 !important;
}

Then it shows in the off-white background and black text and it’s all good. I tried it with your additional ‘*’ selector and it broke the dropdown. It no longer popped up.

But the question still remains: which core variable should I replace the hsl() colour with? No matter which variable I use, the inspector crosses it out and says it’s an invalid property. And the popup loses its opacity so the stuff below bleeds through.

phiw13 · 2025-04-12 12:58:16

Hmm… Is that widget loaded as a component via the shadowdom magic (similar to the code preview panel)? Unclear from their demo.

In which case, maybe

:host(#name_of_widget) {
  .choices__list--dropdown,
  .choices__list[aria-expanded] {
    color:……
    background-color:……………
  }
}

You would need to find out the ID of the top level element of that dropdown widget.

BTW, remove the opacity: 1

Bloke · 2025-04-12 17:14:57

Hehe I’ve no idea.. it’s all voodoo to me. But I’ll try and see if there’s a parent that can be used. Thanks for the pointers.

phiw13 · 2025-04-13 06:02:00

BTW, I see I forgot to mention it, that CSS snippet goes into your admin theme custom.css.

Bloke · 2025-04-13 06:52:55

phiw13 wrote #339503:

BTW, I see I forgot to mention it, that CSS snippet goes into your admin theme custom.css.

Oh, that might explain it. I was hacking their CSS file directly. I’ve made a small handful (3 or 4 I think) of changes. I’ll see if things improve if I reset the file and add the changes to the admin theme. Thanks for the tip.

Bloke · 2025-04-13 10:48:15

Hmm. I moved stuff to custom.css. It’s loaded but the rules in choices.min.css seem to override them. It works if I use a regular colour value like black or red and add !important. But if I try any of the core colour values, I still get Invalid Property showing, and it’s struck through in the Inspector.

Inspector screenshot

This is way above my pay grade.

phiw13 · 2025-04-13 11:00:02

Aha! Now I understand your problem. What you use is indeed an invalid value. Try:

.choices__inner {
  background-color: var(--txp-primary-back) !important;
}

In your custom.css

Bloke · 2025-04-13 11:05:41

phiw13 wrote #339511:

Try: var(--txp-primary-back) !important;

OMG. I am such a dunce.

Of course it’s that. Thank you sooo much. You can tell I’m a CSS Luddite can’t you?! Moral of the story: assumption is the mother of all cockups.

That’s fantastic, thank you. Now I can forge ahead and see if I can come up with some colour combos and selectors to tame it on both light/dark themes.

Textpattern CMS

Textpattern CMS support forum

#1 2025-04-11 17:02:34