not easy to use in dark theme

[Usey95]

It is not easy to use in a dark theme app.Maybe an additional clip for element can help?

[josias-r]

@Usey95 Could you share a screenshot to illustrate the problem?

The popover element can be styled any way you want. So I assume you are talking about the color of the cutout element (darkening of the screen)?

[Usey95]

@Usey95 Could you share a screenshot to illustrate the problem?

The popover element can be styled any way you want. So I assume you are talking about the color of the cutout element (darkening of the screen)?

Yes！If the whole UI is in dark color, it's hard to distinguish the cutout element.

[josias-r]

@Usey95 I see.

I think you can already force overwrite the styling with css. The element you are looking for is the .boarding-coutout-svg path element. You can try to overwrite the fill styling using a stylesheet like this:

.boarding-coutout-svg path {
   fill: white !important;
}

Note that you can also already configure the opacity of the darkening, which might also help with your problem, without needing to change the color:

const boarding = new Boarding({
    opacity: 0.8, // try numbers ranging from 0 to 1
});

If the first option is desired, I will consider adding it to the available options so it can be configured without the need for a !important stylesheet. Then it would look something like this:

const boarding = new Boarding({
    cutoutColor: "white", // or `rgb(255,255,255)` or #FFFFFF, ...
});

[Usey95]

@josias-r Appreciate for your detailed reply!
Maybe I didn't make myself clear. What I want is to highlight the focused item directly instead of dealing with the background.
There are two way to do this, either add a border or add a background with inverted color.
For background way, the lib don't have a standalone element for now and zindex should be added to the focused item.
For border way, now the path leaves a border for the whole page. You can see what I say when you stoke it.

Maybe an option like this would help:

const boarding = new Boarding({
    highlightedBorderColor: "white", // or `rgb(255,255,255)` or #FFFFFF, ...
    ...other attr for stoke
});

[josias-r]

@Usey95 If you want to add styling to the highlighted element itself, you can also do this, simply by adding styles to the boarding-highlighted-element class. This class will always get applied to the currently highlighted DOM element.

Here's an example:

If this is still not what you are trying to achieve, please provide a screenshot illustrating the problem 😄

[Usey95]

I think a stage like driver would help, but I solved my situation anyway.

[josias-r]

@Usey95 There is already a ticket for that #5.

But I still have to experiment with the concept of a stage, because there are a lot of issues the way driver approaches the idea, and I'm not sure of the advantages of a stage, which cannot be done with the methods I meantioned above.

The issues with driver's solution is that it will force z-index on the elements, which will very quickly break any slightly more complex layouts that rely on z-index (that can also include positioning, opacity, etc. of elements).

Boarding aims to be a general solution that works for simple websites but also compelx web applications with modals, dialogs, dropdowns, etc.

I will close this, and keep the other ticket open.

[Usey95]

The issues with driver's solution is that it will force z-index on the elements, which will very quickly break any slightly more complex layouts that rely on z-index (that can also include positioning, opacity, etc. of elements).

Yes, that's why I turn to use boarding.

But stage is useful for hiding popup、modal and notifications without making any changes to the highlighted element itself. Hope to see it soon. @josias-r

[josias-r]

@Usey95 Interesting feedback, thank you :D

Can you give concrete and full examples for hiding popup, modal and notifications? I will note them down in the main ticket. I'm holding out on working on that stage feature, since I am not sure on what results are desired. So any concrete examples of what you would like to have as a built-in functionallity will be a next step for the concept