How can I customize my pagination design?

[harukajmickey]

Hi I am working on this pagination.

https://u20fo1fsqriynysh-57309069474.shopifypreview.com/blogs/news

Could anyone help me with the code to apply the following?

• The current page is black and the others are gray.

 {% assign total_pages = blog.articles.size | divided_by: articles_per_page | plus: 1 %}
                  {% if total_pages > 1 %}
                    <nav aria-label="Page navigation example">
                      <ul class="list-style-none flex justify-center mt-10">
                        {%- if $currentPage > 1 -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300 transform rotate-180" href="{{ paginate.previous.url }}"
                              aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.previous.url }}" aria-label="Previous">
                              <img class="rotate-180 w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="前のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                        {% for page in (1..total_pages) %}
                          <li>
                            <a class="relative block rounded mx-4 text-lg transition-all duration-300 underline"
                              href="{{ blog.url }}{{ '/page' }}{{ page == 1 ? '' : page }}">{{ page }}</a>
                          </li>
                        {% endfor %}
                        {%- if $currentPage < total_pages -%}
                          <li>
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}"
                              aria-label="Next"><img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- else -%}
                          <li class="disabled">
                            <a class="relative block rounded px-4 transition-all duration-300" href="{{ paginate.next.url }}" aria-label="Next">
                              <img class="w-4/5 opacity-25 hover:opacity-100" src="{{ 'arrow.svg' | file_url }}" alt="次のボタン">
                            </a>
                          </li>
                        {%- endif -%}
                      </ul>
                    </nav>
                  {% endif %}

<style>
.underline {
  padding-bottom: 5px;
  position: relative;
}
.underline::before {
  background: #333;
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform 0.3s;
}
.underline:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.underline.active:hover {
  border-bottom-color: transparent; 
}
</style>
                  

Thank you in advance!