<template v-slot:product="{ row: customer }">
<div :class="customer.product === "Basic" && "highlighted-cell"">
{{ customer.product }}
</div>
</template>
<style lang="scss">
.table td:has(.highlighted-cell) {
background-color: red;
border-style: solid;
border-width: initial;
border-color: greenyellow;
}
</style>
<style lang="scss">
.table td:has(.r-cell) {
background-color: #ed5c53;
border-style: solid;
border-width: medium;
border-color: rgb(0, 0, 0);
color: white;
}
</style>
border-color
value you can use a bootstrap variables.border-color: var(--bs-border-color);
//color for dark mode
[data-bs-theme="dark"] .table td:has(.r-cell){
border-color: black;
}
//color for light mode
[data-bs-theme="light"] .table td:has(.r-cell) {
border-color: white;
}