.pagination > li > a
{
    background-color: white;
    color: #5A4181;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: #5a5a5a;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: #5A4181 !Important;
    border: solid 1px #5A4181 !Important;
}

.pagination > .active > a:hover
{
    background-color: #5A4181 !Important;
    border: solid 1px #5A4181;
}

.example .pagination>li>a,
.example .pagination>li>span {
  border: 1px solid purple;
}
.pagination>li.active>a {
  background: purple;
  color: #fff;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="example">
    <nav>
      <ul class="pagination">
        <li class="disabled">
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li class="active"><a href="#">1</a>
        </li>
        <li><a href="#">2</a>
        </li>
        <li><a href="#">3</a>
        </li>
        <li><a href="#">4</a>
        </li>
        <li><a href="#">5</a>
        </li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

It may not be functioning correctly because of specificity concerns, consider including a parent class or style using an ID for the pagination UL element, as I have demonstrated with the parent <div class="example">

Learn more about Specificity here

Mastering the correct classes makes customizing CSS a breeze, especially when following bootstrap styling.

I personally prefer using bootstrap 3.3.5 for my projects.

Here are my default settings:

https://i.sstatic.net/iWqVt.png

To change the color scheme of all elements, including the active page, I use the following CSS code. Feel free to adjust the colors to your liking:

.pagination > li > a
{
    background-color: white;
    color: purple;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: purple;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: purple;
    border: solid 1px purple;
}

.pagination > .active > a:hover
{
    background-color: purple;
    border: solid 1px purple;
}

This is how it looks after applying the style changes:

https://i.sstatic.net/S1swU.png

This code snippet depicts the selector and style rules used in Boootstrap 3.3.5 to manage the background color of a pagination element:

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
}

The selectors provided are not sufficiently specific enough, with a specificity value of 0 0 2 1, whereas the Bootstrap selectors have a value of 0 0 2 2.

Specificity Values You Provided:

.pagination a:hover = `0 0 2 1`
.pagination .active a = `0 0 2 1`
.pagination a:focus = `0 0 2 1`

0 0 1 0 for the class .pagination, 0 0 1 0 for the pseudo class :hover, and 0 0 0 1 for the element a.

Bootstrap Specificity Values:

.pagination > li > a:focus = `0 0 2 2`

0 0 1 0 for the class .pagination, 0 0 1 0 for the pseudo class :focus, and 0 0 0 1 for each element, specifically a and li.

Recommended Actions:

1. Modify the existing code by changing #eee to purple.
2. Create an override selector with equal or higher specificity than the original. Ensure that it is placed after the original selector in your document.

Option #1

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: purple;
    border-color: #ddd;
}

Option #2

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 3;
    color: #23527c;
    background-color: purple;
    border-color: #ddd;
}

/* ...additional CSS goes here... */

/* Choose one of the following options */

/* SAME SPECIFICITY OPTION - 0 0 2 2, place after original rule */
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    background-color: purple;
}
/* HIGHER SPECIFICITY - Slight increase, 0 0 2 3 */
ul.pagination > li > a:focus,
ul.pagination > li > a:hover,
ul.pagination > li > span:focus,
ul.pagination > li > span:hover {
    background-color: purple;
}
/* HIGHER SPECIFICITY - Significant increase, 0 1 1 1 */    
#my-paginator a:focus,
#my-paginator a:hover,
#my-paginator span:focus,
#my-paginator span:hover {
    background-color: purple;
}

It is advisable to increment specificity gradually if possible and avoid relying on IDs. Refer to this useful Specificity Calculator for guidance.

Customize these SASS variables to match your color scheme:

$header-color: $primary-color !default;
$header-bg: $white !default;
$header-border-color: $gray-300 !default;

$header-hover-color: $link-hover-color !default;
$header-hover-bg: $gray-200 !default;
$header-hover-border-color: $gray-300 !default;

$header-active-color: $active-link-color !default;
$header-active-bg: $active-link-bg !default;
$header-active-border-color: $header-active-bg !default;

$header-disabled-color: $gray-600 !default;
$header-disabled-bg: $white !default;
$header-disabled-border-color: $gray-300 !default;

For Bootstrap 4.5:

(This CSS example showcases a dark theme, but feel free to customize the colors)

.page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #d9d9d9 !important;
    background-color: #4f4f4f !important;
    border: 1px solid #262626 !important;
}
.page-link:hover {
    z-index: 2;
    color: #fff !important;
    text-decoration: none;
    background-color: #a4a4a4 !important;
    border-color: #dee2e6;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #808080 !important;
    border-color: #353535;
}

When working with Bootstrap 5, the following CSS code can be used for pagination styling:

.pagination {
      --bs-pagination-color: #808080;
      --bs-pagination-hover-color: #6d6d6d;
      --bs-pagination-active-color: #fff;
      --bs-pagination-active-border-color: #33055b;
      --bs-pagination-active-bg: #502a71;
      --bs-pagination-hover-bg: #ffc0f7;
} 

For more information, refer to the official Bootstrap documentation: https://getbootstrap.com/docs/5.3/components/pagination/

One of the essential CSS attributes to remember is:

.pagination > li > a, .pagination > li > span{
     color:black !important;
}

CSS : Implement the following active styles to customize the existing appearance.

.pager li .active{
      background-color: rgb(181, 181, 214);
      color: rgb(9, 9, 80);
}

HTML : How to utilize this style as a class

<li><a href='#' class='active'>1</a></li>

Even includes the disabled button styling

/* Pagination Color */
  .pagination > li > a
  {
      background-color: #343A40;
      color: #ffffff;
  }
  
  .pagination > li > a:focus,
  .pagination > li > a:hover,
  .pagination > li > span:focus,
  .pagination > li > span:hover
  {
      color: #fff;
      background-color: #1D2124;
      border-color: #ddd;
  }
  
  .pagination > .active > a
  {
      color: white;
      background-color: #007BFF !Important;
      border: solid 1px #007BFF !Important;
  }
  
  .pagination > .active > a:hover
  { 
      background-color: #0066CC !Important;
      border: solid 1px #0066CC;
  }

  .pagination > .disabled > span,
  .pagination > .disabled > span:hover,
  .pagination > .disabled > a,
  .pagination > .disabled > a:focus {
      color: #fff !Important;
      background-color: #343a40 !Important;
      border-color: #343a40;
  }