How to set the b-pagination’s main color?

In bootstrap-vue pagination there is no slot for change main color of pagination.

you see there is only blue color for it.

is there any way to change it to my required color?

Answer

You could change it by changing the CSS of the active item of b-pagination. I illustrated the solution by the following code:

new Vue({
  el: '#app',
  data() {
    return {
      rows: 100,
      perPage: 10,
      currentPage: 1
    }
  },

})

.customPage.page-item.active .page-link {
  background-color: red;
  border-color: red;
}

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" page-class="customPage"></b-pagination>
</div>