Changing the color of table sort arrows

By default, the sort arrows on sortable tables are black for Hydra wikis, and white for HydraDark wikis. If you use a dark background color for table headers on Hydra, or a light one on HydraDark wikis, the sort arrows can be difficult to see. Use the following code to switch arrow colors.

Switch to white arrows

/* White sort arrows on sortable tables */
table.jquery-tablesorter th.headerSort {
    background-image: url(/skins/HydraDark/images/dark/sort_both.png?8a792) !important;
}

table.jquery-tablesorter th.headerSortUp {
    background-image: url(/skins/HydraDark/images/dark/sort_up.png?a6fb9) !important;
}

table.jquery-tablesorter th.headerSortDown {
    background-image: url(/skins/HydraDark/images/dark/sort_down.png?5514d) !important;
}

Switch to black arrows

/* Black sort arrows on sortable tables */
table.jquery-tablesorter th.headerSort {
    background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%209%22%20height%3D%229%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M14.5%205l-4%204-4-4zM14.5%204l-4-4-4%204z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}

table.jquery-tablesorter th.headerSortUp {
    background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%204%22%20height%3D%224%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M6.5%204l4-4%204%204z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}

table.jquery-tablesorter th.headerSortDown {
    background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021%204%22%20height%3D%224%22%20width%3D%2221%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M14.5%200l-4%204-4-4z%22%2F%3E%0A%3C%2Fsvg%3E%0A) !important;
}

Table headers with backgrounds or gradients

If your table headers are styled with background images or colour gradients, the same selectors should include that styling. For example (this example uses white arrows):

.skin-hydradark table.jquery-tablesorter th.headerSort {
    background-attachment: scroll;
    background-image: url(/skins/HydraDark/images/dark/sort_both.png?8a792), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
    background-repeat: no-repeat, repeat;
    background-position: center right, center center;
    padding-right: 21px;
}

.skin-hydradark table.jquery-tablesorter th.headerSortUp {
    background-attachment: scroll;
    background-image: url(/skins/HydraDark/images/dark/sort_up.png?a6fb9), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
    background-repeat: no-repeat, repeat;
    background-position: center right, center center;
    padding-right: 21px;
}

.skin-hydradark table.jquery-tablesorter th.headerSortDown {
    background-attachment: scroll;
    background-image: url(/skins/HydraDark/images/dark/sort_down.png?5514d), linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%) !important;
    background-repeat: no-repeat, repeat;
    background-position: center right, center center;
    padding-right: 21px;
}