Change css pagination datatables

Question

Is there any easy way to change the css of a datatables? In my case, I would like to change the color of his pagination, I would like to put a darker blue. I believe he’s picking up some kind of bootstrap prop by the shade of blue, but I’m not sure.

Below is my javascript code

$ ("#tabela_mensagens").DataTable
    ({
        responsive: true,
        pagingType: "full_numbers",
        pageLength: 50,
        language:
        {
            url: "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Portuguese-Brasil.json"
        },
        ajax:
        {
            url: "../ajax/mensagens.php",
            dataSrc: "mensagens",
            data:
            {
                acao : "buscar"
            }
        },
        order: [[ 2, "asc" ]],
        columns:
        [
            // 0
            {
                render: function (data, type, full, meta)
                {
                    var html = "<button title='Opções desta mensagem' id='botao_agrupador' type='button' class='btn btn-sm btn-dark dropdown' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false' style='background-color: #114287;'> <i class='fas fa-cogs'> </i> </button>" +
                        "<div class='dropdown-menu' aria-labelledby='botao_agrupador'>" +

                            // editar
                            "<a class='dropdown-item' data-toggle='modal' href='#modal_formulario_mensagens_pre_definidas' data-backdrop='static' data-id_mensagem_pre_definida='" + full.id_mensagem_pre_definida + "' data-numero_mensagem_pre_definida='" + full.numero + "' data-descricao_mensagem_pre_definida='" + full.descricao + "' data-sigla_mensagem_pre_definida='" + full.sigla + "'> <i class='fa fa-edit'> </i> Editar </a>" +

                            // apagar
                            "<a class='dropdown-item' data-toggle='modal' href='#modal_apagar_registro' data-backdrop='static' data-id='" + full.id_mensagem_pre_definida + "' data-descricao='" + full.descricao + "' data-acao='mensagens_pre_definidas'> <i class='fa fa-trash'> </i> Apagar </a>" +
                    "</div>";

                    return (html);
                }
            },
            // 1
            {data: "id_mensagem_pre_definida"},
            // 2
            {data: "numero"},
            // 3
            {data: "descricao"},
            // 4
            {data: "sigla"},
            // 5
            {data: "data_cadastro"}
        ],
        initComplete: function ()
        {
            oculta_modal_carregando ();
        }
    });

Answer 1

Actually it’s not quite the primary, because he doesn’t use bg-primary element. What it is doing is the link that has the class .active Dad gets blue background

So just switch there to the color you want to type

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: navy;
    border-color: navy;
}

Will result in that