Vue.js, Bootstrap, custom _rowVariant color (custom.scss)

Question

I would like to be able to add a custom color as a background to my table in vue

This is my .vue file:

<template>
....
  <b-table small :fields="fields" :items="items">
    <template #cell(name)="data">
      <b>{{ data.value.name }}</b>
    </template>
    ....    
  </b-table>
....
<template>

<script>
export default {
  data () {
    return {
      items: [
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'light' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'success' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'danger' },
          { name: { name: '....', url: '....' }, utility: '....', icon: '../assets/.....png', _rowVariant: 'custom-one' }
      ],
      tableVariants: ['primary', 'secondary', 'info', 'danger', 'warning', 'success', 'light', 'dark','custom-one', 'custom-two', 'custom-three' ],
..........
</script>

<style lang="scss" scoped>
@import '../scss/custom.scss';
.........
</style>

As you can see i'm trying to import from the $theme-colors declaring within the Array tableVariant.

my custom.scss file:

$purple:  #6f42c1 !default;
$porpora: #75151e !default;
$orange:  #fd7e14 !default;


$theme-colors:(
  "custom-one": $orange,
  "custom-two": $purple,
  "custom-three": $porpora
);

@import "../../node_modules/bootstrap/scss/bootstrap";

How can I add a _rowVariant custom color? Thanks!

Any reason why you're importing your custom.scss file in a component, instead of globally? — Hiws
– Hiws, Commented Mar 29, 2021 at 2:03

tao · Accepted Answer · 2021-03-30 13:20:09Z

2

The <b-table> element results into a <table> element with a class of b-table (and some other bootstrap specific classes). By default, this element does not have a background-color, except for the case of :dark="true", which applies background-color: #343a40; to it.

Which means

.b-table {
  background-color: red;
}

...will work.

Change red to your desired color. If your color is dark, pass :dark="true" to <b-table> which will change text colors and cell/row border colors accordingly.

Also, if you only want this on one particular table, give it an id or a class and use that selector to make the rule apply only to that element (the above will apply it to all <b-table> elements).

Note this does not interfere with your ability to style rows and cells using _cellVariant and/or _rowVariant.

If you want to go down the route of defining extra bootstrap color variants, here's how to do it:

customized-bootstrap.scss

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

// removes the colors, if you don't use them
$colors: map-remove($colors,
  "blue", "indigo", "purple", "pink", "red", "orange", "yellow",
  "green", "teal", "cyan", "white", "gray", "gray-dark"
);

// adds custom colors, should you want any:
$colors: (
  "orange": #f50,
  "red": #BC2E2E,
  "green": #8CB439,
  "yellow": #DEC648
);

// removes theme-colors you don't want:
$theme-colors: map-remove($theme-colors,
  "warning", "info", "light", "dark"
);

// adds theme-colors you want. Note this this is not assigned
// it is merged with the difference between defaults and the ones removed above
// so, for example, `$secondary`, `$danger` will still be present.
$theme-colors: (
  "primary": #f50,
  "light": #DDDEE1,
  "dark": #15161a,
  "badass": #BADA55
);

// import the functionality you want (and remove the stuff you don't want).
// from `~bootstrap/scss/bootstrap`, except the first three 
// `functions`, `variables` and `mixins`, 
// which you already imported and used above

@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";

//... all the way down to `~bootstrap/scss/print`

Obviously, in your main.(js|ts) you have to replace

import 'bootstrap/dist/css/bootstrap.css'

with

import './path/to/customized-bootstrap.scss'

Now you can use var(--badass) on any element of your app, it will result into #BADA55.
For example, if you provide a row with: _rowVariant: "badass", it will apply the class table-badass to all the cells of that row and, in your CSS, you should have:

.table-badass {
  background-color: var(--badass);
  color: var(--light);
}

edited Mar 30, 2021 at 13:20

answered Mar 28, 2021 at 18:45

tao

91.1k18 gold badges138 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pietro Tamburini Over a year ago

I tried to apply the color to the b-table class and it works. But I would like to know if there is a way to manage the colors of the different rows, and not of the whole table. Thanks

tao Over a year ago

@Pietro, last, but not least, asking additional questions in answer comments is off-topic on Stack Overflow. If answered, such questions don't benefit from indexing and future Stack Overflow users with the same question won't be able to benefit from the answer. In short, by asking in comments you're being selfish. Be generous and ask it separately, if it hasn't been asked before.

Collectives™ on Stack Overflow

Vue.js, Bootstrap, custom _rowVariant color (custom.scss)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related