Q:

How to change color of pagination in bootstrap-vue?

I tried to change it with bootstrap examples but failed.
        <b-pagination
            v-model="currentPage"
            :total-rows="users.length"
            :per-page="perPage"
            align="fill"
            size='lg'
            first-number
            last-number
            class="my-0"
        ></b-pagination>

A:

SCSS
As Troy pointed out in a comment, bootstrap has various SCSS variables you can use to customize the pagination. So if you're using SCSS this would be the preferred way.
View the variables.
CSS
You can add a class to b-pagination and use that class to target the a tags inside the pagination. Check the snippet for an example of this.
You can also use the following props (requires v2.3.0+) to place specific classes on the various types of buttons.
Note these will place the class on the li, so you'll still need CSS to target the a tag.
For more information about the class props check the reference section
page-class
first-class
last-class
prev-class
next-class
ellipsis-class

If you're using a scoped style tag in your components, note you might have to use a deep selector to target that a tags correctly.

new Vue({
  el: '#app'
})
.customPagination > li > a {
  color: red;
}

.customPagination > li.active > a,
.customPagination > li > a:hover
{
  color: white;
  background-color: green!important;
}
<script src="https://unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.js"></script>

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.4.1/dist/bootstrap-vue.css" rel="stylesheet"/>

<div id="app">
  <b-pagination
    :total-rows="50"
    :per-page="5"
    class="customPagination"
  >
  </b-pagination>
</div>

