SCSS v-bind doesn't work with native css darken(...)

[aqordeon]

Vue version

3.2.31

Link to minimal reproduction

https://play.vuejs.org/#eNp9Ul1PwjAU/Ss3VQMkfPlBTBBIlJCoD2rUB2P2wFgvc9C1TduNGbL/7l0nyINhL2vvOffec066Zbdad/MM2ZCNbGQS7cCiyzSIUMbjgDkbsEkgIyWtg0U8VUIZGEPjpD+44MvrRiBHvbqPWHRxmGoROqQbwIgnOUQitJYm+f/nx9TPA/ruUQgFG2UE9+QesQka9Q5m+JnWfQsEGymNnGrd3STYVn0LZTiaIZzrAqwSCQeD/MYjYbSOjcok70SV7iHknUUiebMx56FZo2yebn8tlW0Y9M9a80aLOku/tefXTlibMiD7yyTurqySFJRfS4ZUqhOB5lm7hOIJ2LAWVGEhWds8+pozGbZ39egLo/U/9ZUtqlrAXgxaNDkGbI+50MToanj29oQFnfdgqngmiH0EfEWKJas01rQ7CoRkH/C82odUK+MSGb/bWeFQ2p2pSmjFLD0/YPRapkes/8m97F75PkqUlT/StMzo

Steps to reproduce

Have a look at the background-color (not work). The v-bind is working properly on the border but not in background-color because the background-color has native css darken(...) (same as lighten(...) does not work too)

What is expected?

The background color should show

What is actually happening?

The background color is not showing while border color is showing

System Info

No response

Any additional comments?

No response

[edison1105]

Are you sure native css supports darken?

[aqordeon]

ahh my bad, you're correct, native css didn't supports darken. I just followed a tutorial I found and didn't notice the SCSS thing. Now I use background-color: v-bind('`color-mix(in srgb, ${bgColor} 80%, black)`'); and it work as I expected. Thanks for remind me.