Color of Sorting Arrows

Color of Sorting Arrows

jdadwilsonjdadwilson Posts: 127Questions: 30Answers: 1

Is it possible to change the color of the dataTable 2.0 sorting arrows?

All my tables have a dark background for the header. Specifically, I would like the twin arrows (up/down) to be white when both show and only the one active arrow to be white when used.

jdadwilson

Answers

  • allanallan Posts: 63,678Questions: 1Answers: 10,497 Site admin

    Apply a color style to the ::before and ::after pseudo classes for the arrow containers: https://live.datatables.net/xawemeze/1/edit .

    Allan

  • jdadwilsonjdadwilson Posts: 127Questions: 30Answers: 1

    Yes, that works when one arrow is displayed, but not when both are displayed. With a dark background heading the the initial display of both arrows are almost invisible, this with no indication that the column is sortable.

    jdadwilson

  • allanallan Posts: 63,678Questions: 1Answers: 10,497 Site admin

    Yes, the pseudo classes have some opacity applied to them, so it wouldn't work well unless you modified that as well.

    You need to add a bit more CSS (unless you just want to use the DataTables, Bootstrap 5 or Bulma dark modes): https://live.datatables.net/xawemeze/2/edit .

    If you right click on the elements and select "Inspect" you'll see the styles that are applied and therefore how they can be overridden.

    Allan

Sign In or Register to comment.