Background variant not working

[moyalmic]

I've been trying to get the background variant to work in my project, but it doesn't seem to respect the enum i'm sending in. Bellow is the screenshot of my code, the bgColor does actually take effect and changes correctly, but the Lines (or dots for that matter) don't appear. Am I missing something?

[bcakmakoglu]

You can't use both a bg color and a pattern color on the Background component.
the bg color prop is sort of useless since you can just use <VueFlow :style="{ backgroundColor: color }">

[bcakmakoglu]

bgColor & patternColor will be deprecated with the next minor release of @vue-flow/background.

There will be a replacement prop called color which applies to the pattern.

To set a background color you can use, as I suggested above, css instead :)

[moyalmic]

The problem wasn't with the color though, it was that the variant isn't being respected and neither a lines or dots grid is being rendered...

[bcakmakoglu]

The problem is with the color.
If you use a bg-color there will be no pattern.
It is either or not both.

[bcakmakoglu]

Here are some example to make it clearer:

<!-- This will ONLY show a background color, NO pattern; even if you use `pattern-color`, `bg-color` will OVERWRITE it -->
<Background pattern-color="#fefefe" bg-color="#000" />
<Background bg-color="#000" />

<!-- This will show a dots pattern (default) - both work the same -->
<Background pattern-color="#fefefe" />
<Background variant="dots" pattern-color="#fefefe" />

<!-- This will show a lines pattern -->
<Background variant="lines" pattern-color="#fefefe" />

[moyalmic]

Oh, I understand now. Thanks for the clarification.

So how would I achieve a custom background color with custom pattern colors? I suppose I could color the div containing the VewFlow component?

[bcakmakoglu]

You can just add a background color to the VueFlow component :)

<VueFlow style="background-color: hotpink">...