Custom styling about psyche HOT 4 OPEN

I'd like to fix the following issue: the highlighted text is white with yellow background when the result is selected. So I don't know if there's variable in the themes object to handle this.

Ah, thanks, not sure how I missed that. It's not meant to be yellow at all, I'll release a patch for that soon.

Other thing that I'd like to change is differentiate a selected element from a element with :hover:

Good idea. I'm thinking an outline for select elements and the current fill for hovered elements, I'll see how it looks when I test it.

from psyche.

Those styling issues have been fixed by v0.3.2, but I'll leave this open to come back to the idea of custom styling for future updates.

from psyche.

I know about ::part(), I left it out because I'm hesitant to make it fully customisable - some parts shouldn't be modified (e.g. the balance of element sizing/layout, the position:sticky behaviour of section headings and the "Search by psyche" footer link) and the component is built to be a drop-in, recognisable solution that doesn't require any user HTML/CSS to work (everything should be self-contained within the import - it's not a reuseable custom element built to follow the web component standards, it just makes use of those web APIs for convenience). You can already use custom media queries etc. to customise the themes beyond the builtin light/dark, as the variables are applied to the <psyche-search></psyche-search> element outside the shadow root.

The majority of the client is the UI, and the HTML and CSS involved are very specifically dependent on each other. I'm considering the possibility of separating out the client logic & generalising the Result interface a bit further so there could be multiple client UI options, as the current one is very heavily designed for documentation websites only. Further client customisation would probably be something I would include in that update. I've done some more testing this morning with the ::part() selector and it's more restrictive than I thought (i.e. you can't chain it with a child or sibling selector), so I'd probably include it for some but not all elements as part of that.

from psyche.

Ok, no problem.

Yeah, ::part() is used to label specific elements and doesn't allow children selectors. This is good because you can decide which elements you want to make fully customisable and which don't.

I'd like to fix the following issue: the highlighted text is white with yellow background when the result is selected. So I don't know if there's variable in the themes object to handle this.

Other thing that I'd like to change is differentiate a selected element from a element with :hover:

from psyche.