How to change default color of element in vue-bootstrap

Question

In my b-table i have a function that colors the rows based on a property :

<template>
    <b-table sticky-header="70vh" bordered striped
            :items="logs"
            :fields="fields"
            @row-clicked="showLogDetails"
            selectable
            select-mode="single"
            :tbody-tr-class="colorRowByCode"/>
</template>

methods: {
    colorRowByCode(item, type){
      if (!item || type !== 'row') return
      if(item.level === 'Critical') return 'table-danger'
      if(item.level === 'Warning') return 'table-warning'
      if(item.level === 'Error') return 'table-primary'
    }
  }

As you can see i return table-primary, let's say i wanna change this color to #FFDEB9

I followed these documentations : https://getbootstrap.com/docs/4.0/getting-started/theming/

https://github.com/bootstrap-vue/bootstrap-vue/issues/1395

https://bootstrap-vue.org/docs/reference/theming

So i created a custom.scss file in my assets and added this to my App.vue :

<style lang="scss">

  @import "assets/custom.scss";
  @import "~bootstrap/scss/bootstrap.scss";
  @import '~bootstrap-vue/dist/bootstrap-vue.css';

</style>

in my custom.scss i tried multiple things out like :

$table-primary: #FFDEB9 !default;
table-primary{
    color: theme-colors(#FFDEB9);
}

$theme-colors: (
  "primary": #FFDEB9,
  "table-primary": #FFDEB9
);
table-primary{
    color: #FFDEB9
}

without success, when i click on a row in the HTML explorer, all i see is that it has a class table-primary

enter image description here

How can i achieve this ? I really need differents colors for my table rows. Thanks a lot

Romil Lodaya · Accepted Answer · 2022-04-04 10:11:54Z

0

You can have custom colored rows without changing the theme colors. Since you are giving the class name based on row, you can write CSS for the same.

Example : Lets say you have 3 types of row colors (row-danger, row-warning, row-primary)

methods: {
    colorRowByCode(item, type){
      if (!item || type !== 'row') return
      if(item.level === 'Critical') return 'row-danger'
      if(item.level === 'Warning') return 'row-warning'
      if(item.level === 'Error') return 'row-primary'
    }
  }

Now in CSS you can add,

<style lang="css">

.row-primary{
  background: #FFDEB9;
}

.row-danger{
  background: #FF0000;
}

.row-warning{
  background: #FF0101;
}

</style>

So basically you will be adding classes to your HTML using your method colorRowByCode and those classes will define the color for row as shown in CSS

answered Apr 4, 2022 at 10:11

Romil Lodaya

814 bronze badges

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

Collectives™ on Stack Overflow

How to change default color of element in vue-bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related