In this post we will create a Dark themed JQuery DataTable CSS design. We will create two different designs. One will be a combination of Black and Dark Gray colors and other one will be with Red-Black colors combination. So let’s start. I’m using a static HTML table which is being converted into JQuery Table using JQuery.js and DataTable.js javascripts. I hope you guys will like these designs. These both designs are made from scratch and you are free to use in your Project and change it according to your requirements. Change the CSS file accordingly. Table will also have hover color for DataRows.
HTML:
<html>
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<title>Users</title>
<script src="https://parallelcodes.com/jquery/jquery-3.5.1.js"></script>
<script src="https://parallelcodes.com/jquery/jquery.dataTables.min.js"></script>
<link href="https://parallelcodes.com/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
href="https://use.fontawesome.com/releases/v5.0.1/css/all.css"
rel="stylesheet"
/>
<link href="https://parallelcodes.com/css/design4.css" rel="stylesheet" />
</head>
<body>
<div id="formContent">
<h2>Customer Info</h2>
<hr />
<table id="tblCustomer" class="display" style="width: 100%;">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Company</th>
<th scope="col">Relationship</th>
<th scope="col">City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sven Ottlieb</td>
<td>Drachenblut Delikatessen</td>
<td>Customers</td>
<td>Aachen</td>
</tr>
<tr>
<td>Paula Wilson</td>
<td>Rattlesnake Canyon Grocery</td>
<td>Customers</td>
<td>Albuquerque</td>
</tr>
<tr>
<td>Rene Phillips</td>
<td>Old World Delicatessen</td>
<td>Customers</td>
<td>Anchorage</td>
</tr>
<tr>
<td>Regina Murphy</td>
<td>Grandma Kelly's Homestead</td>
<td>Suppliers</td>
<td>Ann Arbor</td>
</tr>
<tr>
<td>Eliane Noz</td>
<td>Gai pâturage</td>
<td>Suppliers</td>
<td>Annecy</td>
</tr>
<tr>
<td>Palle Ibsen</td>
<td>Vaffeljernet</td>
<td>Customers</td>
<td>Århus</td>
</tr>
<tr>
<td>Eduardo Saavedra</td>
<td>Galería del gastrónomo</td>
<td>Customers</td>
<td>Barcelona</td>
</tr>
<tr>
<td>Carlos González</td>
<td>LILA-Supermercado</td>
<td>Customers</td>
<td>Barquisimeto</td>
</tr>
<tr>
<td>Cheryl Saylor</td>
<td>Bigfoot Breweries</td>
<td>Suppliers</td>
<td>Bend</td>
</tr>
<tr>
<td>Giovanni Rovelli</td>
<td>Magazzini Alimentari Riuniti</td>
<td>Customers</td>
<td>Bergamo</td>
</tr>
<tr>
<td>Maria Anders</td>
<td>Alfreds Futterkiste</td>
<td>Customers</td>
<td>Berlin</td>
</tr>
<tr>
<td>Petra Winkler</td>
<td>Heli Süßwaren GmbH & Co. KG</td>
<td>Suppliers</td>
<td>Berlin</td>
</tr>
<tr>
<td>Yang Wang</td>
<td>Chop-suey Chinese</td>
<td>Customers</td>
<td>Bern</td>
</tr>
<tr>
<td>Jose Pavarotti</td>
<td>Save-a-lot Markets</td>
<td>Customers</td>
<td>Boise</td>
</tr>
<tr>
<td>Robb Merchant</td>
<td>New England Seafood Cannery</td>
<td>Suppliers</td>
<td>Boston</td>
</tr>
<tr>
<td>Maria Larsson</td>
<td>Folk och fä HB</td>
<td>Customers</td>
<td>Bräcke</td>
</tr>
<tr>
<td>Philip Cramer</td>
<td>Königlich Essen</td>
<td>Customers</td>
<td>Brandenburg</td>
</tr>
<tr>
<td>Catherine Dewey</td>
<td>Maison Dewey</td>
<td>Customers</td>
<td>Bruxelles</td>
</tr>
<tr>
<td>Patricio Simpson</td>
<td>Cactus Comidas para llevar</td>
<td>Customers</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>Yvonne Moncada</td>
<td>Océano Atlántico Ltda.</td>
<td>Customers</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>Sergio Gutiérrez</td>
<td>Rancho grande</td>
<td>Customers</td>
<td>Buenos Aires</td>
</tr>
<tr>
<td>Liu Wong</td>
<td>The Cracker Box</td>
<td>Customers</td>
<td>Butte</td>
</tr>
<tr>
<td>André Fonseca</td>
<td>Gourmet Lanchonetes</td>
<td>Customers</td>
<td>Campinas</td>
</tr>
<tr>
<td>Manuel Pereira</td>
<td>GROSELLA-Restaurante</td>
<td>Customers</td>
<td>Caracas</td>
</tr>
<tr>
<td>Pascale Cartrain</td>
<td>Suprêmes délices</td>
<td>Customers</td>
<td>Charleroi</td>
</tr>
<tr>
<td>Patricia McKenna</td>
<td>Hungry Owl All-Night Grocers</td>
<td>Customers</td>
<td>Cork</td>
</tr>
<tr>
<td>Helen Bennett</td>
<td>Island Trading</td>
<td>Customers</td>
<td>Cowes</td>
</tr>
<tr>
<td>Horst Kloss</td>
<td>QUICK-Stop</td>
<td>Customers</td>
<td>Cunewalde</td>
</tr>
<tr>
<td>Sven Petersen</td>
<td>Nord-Ost-Fisch Handelsgesellschaft mbH</td>
<td>Suppliers</td>
<td>Cuxhaven</td>
</tr>
<tr>
<td>Yoshi Latimer</td>
<td>Hungry Coyote Import Store</td>
<td>Customers</td>
<td>Elgin</td>
</tr>
<tr>
<td>Howard Snyder</td>
<td>Great Lakes Food Market</td>
<td>Customers</td>
<td>Eugene</td>
</tr>
<tr>
<td>Martin Bein</td>
<td>Plutzer Lebensmittelgroßmärkte AG</td>
<td>Suppliers</td>
<td>Frankfurt</td>
</tr>
<tr>
<td>Renate Messner</td>
<td>Lehmanns Marktstand</td>
<td>Customers</td>
<td>Frankfurt a.M.</td>
</tr>
<tr>
<td>Michael Holz</td>
<td>Richter Supermarkt</td>
<td>Customers</td>
<td>Genève</td>
</tr>
<tr>
<td>Lars Peterson</td>
<td>PB Knäckebröd AB</td>
<td>Suppliers</td>
<td>Göteborg</td>
</tr>
<tr>
<td>Roland Mendel</td>
<td>Ernst Handel</td>
<td>Customers</td>
<td>Graz</td>
</tr>
<tr>
<td>Matti Karttunen</td>
<td>Wilman Kala</td>
<td>Customers</td>
<td>Helsinki</td>
</tr>
<tr>
<td>Felipe Izquierdo</td>
<td>LINO-Delicateses</td>
<td>Customers</td>
<td>I. de Margarita</td>
</tr>
<tr>
<td>Helvetius Nagy</td>
<td>Trail's Head Gourmet Provisioners</td>
<td>Customers</td>
<td>Kirkland</td>
</tr>
<tr>
<td>Jytte Petersen</td>
<td>Simons bistro</td>
<td>Customers</td>
<td>Kobenhavn</td>
</tr>
<tr>
<td>Henriette Pfalzheim</td>
<td>Ottilies Käseladen</td>
<td>Customers</td>
<td>Köln</td>
</tr>
<tr>
<td>Art Braunschweiger</td>
<td>Split Rail Beer & Ale</td>
<td>Customers</td>
<td>Lander</td>
</tr>
<tr>
<td>Anne Heikkonen</td>
<td>Karkki Oy</td>
<td>Suppliers</td>
<td>Lappeenranta</td>
</tr>
<tr>
<td>Alexander Feuer</td>
<td>Morgenstern Gesundkost</td>
<td>Customers</td>
<td>Leipzig</td>
</tr>
<tr>
<td>Martine Rancé</td>
<td>Folies gourmandes</td>
<td>Customers</td>
<td>Lille</td>
</tr>
<tr>
<td>Lino Rodriguez</td>
<td>Furia Bacalhau e Frutos do Mar</td>
<td>Customers</td>
<td>Lisboa</td>
</tr>
<tr>
<td>Isabel de Castro</td>
<td>Princesa Isabel Vinhos</td>
<td>Customers</td>
<td>Lisboa</td>
</tr>
<tr>
<td>Thomas Hardy</td>
<td>Around the Horn</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Victoria Ashworth</td>
<td>B's Beverages</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Elizabeth Brown</td>
<td>Consolidated Holdings</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Ann Devon</td>
<td>Eastern Connection</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Charlotte Cooper</td>
<td>Exotic Liquids</td>
<td>Suppliers</td>
<td>London</td>
</tr>
<tr>
<td>Simon Crowther</td>
<td>North/South</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Hari Kumar</td>
<td>Seven Seas Imports</td>
<td>Customers</td>
<td>London</td>
</tr>
<tr>
<td>Christina Berglund</td>
<td>Berglunds snabbköp</td>
<td>Customers</td>
<td>Luleå</td>
</tr>
<tr>
<td>Niels Petersen</td>
<td>Lyngbysild</td>
<td>Suppliers</td>
<td>Lyngby</td>
</tr>
<tr>
<td>Mary Saveley</td>
<td>Victuailles en stock</td>
<td>Customers</td>
<td>Lyon</td>
</tr>
<tr>
<td>Martín Sommer</td>
<td>Bólido Comidas preparadas</td>
<td>Customers</td>
<td>Madrid</td>
</tr>
<tr>
<td>Diego Roel</td>
<td>FISSA Fabrica Inter. Salchichas S.A.</td>
<td>Customers</td>
<td>Madrid</td>
</tr>
<tr>
<td>Alejandra Camino</td>
<td>Romero y tomillo</td>
<td>Customers</td>
<td>Madrid</td>
</tr>
<tr>
<td>Peter Wilson</td>
<td>Specialty Biscuits, Ltd.</td>
<td>Suppliers</td>
<td>Manchester</td>
</tr>
<tr>
<td>Hanna Moos</td>
<td>Blauer See Delikatessen</td>
<td>Customers</td>
<td>Mannheim</td>
</tr>
<tr>
<td>Laurence Lebihan</td>
<td>Bon app'</td>
<td>Customers</td>
<td>Marseille</td>
</tr>
<tr>
<td>Ian Devling</td>
<td>Pavlova, Ltd.</td>
<td>Suppliers</td>
<td>Melbourne</td>
</tr>
<tr>
<td>Ana Trujillo</td>
<td>Ana Trujillo Emparedados y helados</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Antonio Moreno</td>
<td>Antonio Moreno Taquería</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Francisco Chang</td>
<td>Centro comercial Moctezuma</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Guillermo Fernández</td>
<td>Pericles Comidas clásicas</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Miguel Angel Paolino</td>
<td>Tortuga Restaurante</td>
<td>Customers</td>
<td>México D.F.</td>
</tr>
<tr>
<td>Marie Delamare</td>
<td>Escargots Nouveaux</td>
<td>Suppliers</td>
<td>Montceau</td>
</tr>
<tr>
<td>Jean-Guy Lauzon</td>
<td>Ma Maison</td>
<td>Suppliers</td>
<td>Montréal</td>
</tr>
<tr>
<td>Jean Fresnière</td>
<td>Mère Paillarde</td>
<td>Customers</td>
<td>Montréal</td>
</tr>
<tr>
<td>Peter Franken</td>
<td>Frankenversand</td>
<td>Customers</td>
<td>München</td>
</tr>
<tr>
<td>Karin Josephs</td>
<td>Toms Spezialitäten</td>
<td>Customers</td>
<td>Münster</td>
</tr>
<tr>
<td>Janine Labrune</td>
<td>Du monde entier</td>
<td>Customers</td>
<td>Nantes</td>
</tr>
<tr>
<td>Carine Schmitt</td>
<td>France restauration</td>
<td>Customers</td>
<td>Nantes</td>
</tr>
<tr>
<td>Shelley Burke</td>
<td>New Orleans Cajun Delights</td>
<td>Suppliers</td>
<td>New Orleans</td>
</tr>
<tr>
<td>Mayumi Ohno</td>
<td>Mayumi's</td>
<td>Suppliers</td>
<td>Osaka</td>
</tr>
<tr>
<td>Pirkko Koskitalo</td>
<td>Wartian Herkku</td>
<td>Customers</td>
<td>Oulu</td>
</tr>
<tr>
<td>Antonio del Valle Saavedra</td>
<td>Cooperativa de Quesos 'Las Cabras'</td>
<td>Suppliers</td>
<td>Oviedo</td>
</tr>
<tr>
<td>Guylène Nodier</td>
<td>Aux joyeux ecclésiastiques</td>
<td>Suppliers</td>
<td>Paris</td>
</tr>
<tr>
<td>Marie Bertrand</td>
<td>Paris spécialités</td>
<td>Customers</td>
<td>Paris</td>
</tr>
<tr>
<td>Dominique Perrier</td>
<td>Spécialités du monde</td>
<td>Customers</td>
<td>Paris</td>
</tr>
<tr>
<td>Fran Wilson</td>
<td>Lonesome Pine Restaurant</td>
<td>Customers</td>
<td>Portland</td>
</tr>
<tr>
<td>Liz Nixon</td>
<td>The Big Cheese</td>
<td>Customers</td>
<td>Portland</td>
</tr>
<tr>
<td>Elio Rossi</td>
<td>Formaggi Fortini s.r.l.</td>
<td>Suppliers</td>
<td>Ravenna</td>
</tr>
<tr>
<td>Maurizio Moroni</td>
<td>Reggiani Caseifici</td>
<td>Customers</td>
<td>Reggio Emilia</td>
</tr>
<tr>
<td>Paul Henriot</td>
<td>Vins et alcools Chevalier</td>
<td>Customers</td>
<td>Reims</td>
</tr>
<tr>
<td>Paula Parente</td>
<td>Wellington Importadora</td>
<td>Customers</td>
<td>Resende</td>
</tr>
<tr>
<td>Mario Pontes</td>
<td>Hanari Carnes</td>
<td>Customers</td>
<td>Rio de Janeiro</td>
</tr>
<tr>
<td>Bernardo Batista</td>
<td>Que Delícia</td>
<td>Customers</td>
<td>Rio de Janeiro</td>
</tr>
<tr>
<td>Janete Limeira</td>
<td>Ricardo Adocicados</td>
<td>Customers</td>
<td>Rio de Janeiro</td>
</tr>
<tr>
<td>Giovanni Giudici</td>
<td>Pasta Buttini s.r.l.</td>
<td>Suppliers</td>
<td>Salerno</td>
</tr>
<tr>
<td>Georg Pipps</td>
<td>Piccolo und mehr</td>
<td>Customers</td>
<td>Salzburg</td>
</tr>
<tr>
<td>Carlos Hernández</td>
<td>HILARION-Abastos</td>
<td>Customers</td>
<td>San Cristóbal</td>
</tr>
<tr>
<td>Jaime Yorres</td>
<td>Let's Stop N Shop</td>
<td>Customers</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Beate Vileid</td>
<td>Norske Meierier</td>
<td>Suppliers</td>
<td>Sandvika</td>
</tr>
<tr>
<td>Pedro Afonso</td>
<td>Comércio Mineiro</td>
<td>Customers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Aria Cruz</td>
<td>Familia Arquibaldo</td>
<td>Customers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Lúcia Carvalho</td>
<td>Queen Cozinha</td>
<td>Customers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Carlos Diaz</td>
<td>Refrescos Americanas LTDA</td>
<td>Suppliers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Anabela Domingues</td>
<td>Tradição Hipermercados</td>
<td>Customers</td>
<td>Sao Paulo</td>
</tr>
<tr>
<td>Karl Jablonski</td>
<td>White Clover Markets</td>
<td>Customers</td>
<td>Seattle</td>
</tr>
<tr>
<td>José Pedro Freyre</td>
<td>Godos Cocina Típica</td>
<td>Customers</td>
<td>Sevilla</td>
</tr>
<tr>
<td>Chandra Leka</td>
<td>Leka Trading</td>
<td>Suppliers</td>
<td>Singapore</td>
</tr>
<tr>
<td>Jonas Bergulfsen</td>
<td>Santé Gourmet</td>
<td>Customers</td>
<td>Stavern</td>
</tr>
<tr>
<td>Chantal Goulet</td>
<td>Forêts d'érables</td>
<td>Suppliers</td>
<td>Ste-Hyacinthe</td>
</tr>
<tr>
<td>Michael Björn</td>
<td>Svensk Sjöföda AB</td>
<td>Suppliers</td>
<td>Stockholm</td>
</tr>
<tr>
<td>Frédérique Citeaux</td>
<td>Blondesddsl père et fils</td>
<td>Customers</td>
<td>Strasbourg</td>
</tr>
<tr>
<td>Rita Müller</td>
<td>Die Wandernde Kuh</td>
<td>Customers</td>
<td>Stuttgart</td>
</tr>
<tr>
<td>Wendy Mackenzie</td>
<td>G'day, Mate</td>
<td>Suppliers</td>
<td>Sydney</td>
</tr>
<tr>
<td>Yoshi Nagase</td>
<td>Tokyo Traders</td>
<td>Suppliers</td>
<td>Tokyo</td>
</tr>
<tr>
<td>Paolo Accorti</td>
<td>Franchi S.p.A.</td>
<td>Customers</td>
<td>Torino</td>
</tr>
<tr>
<td>Annette Roulet</td>
<td>La maison d'Asie</td>
<td>Customers</td>
<td>Toulouse</td>
</tr>
<tr>
<td>Elizabeth Lincoln</td>
<td>Bottom-Dollar Markets</td>
<td>Customers</td>
<td>Tsawassen</td>
</tr>
<tr>
<td>Yoshi Tannamuri</td>
<td>Laughing Bacchus Wine Cellars</td>
<td>Customers</td>
<td>Vancouver</td>
</tr>
<tr>
<td>Daniel Tonini</td>
<td>La corne d'abondance</td>
<td>Customers</td>
<td>Versailles</td>
</tr>
<tr>
<td>John Steel</td>
<td>Lazy K Kountry Store</td>
<td>Customers</td>
<td>Walla Walla</td>
</tr>
<tr>
<td>Zbyszek Piestrzeniewicz</td>
<td>Wolski Zajazd</td>
<td>Customers</td>
<td>Warszawa</td>
</tr>
<tr>
<td>Dirk Luchte</td>
<td>Zaanse Snoepfabriek</td>
<td>Suppliers</td>
<td>Zaandam</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready(function () {
$("#tblCustomer").DataTable();
});
</script>
</body>
</html>
CSS 1: (Black and Gray color combination)
:root {
--theadColor: #38000e;
--theadTextColor: #fff;
--darkColor:#000;
--lightColor:#fff;
--darkRowColor: #e8003a;
}
body {
font-family: "Open Sans", sans-serif;
}
table.dataTable {
border:1px solid #000;
background-color: #000;
}
th,tr,td
{
border-color: #000 !important;
}
thead {
background-color: var(--theadColor);
}
thead > tr,
thead > tr > th {
background-color: transparent;
color: var(--theadTextColor) !important;
font-weight: normal;
text-align: start;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 0px solid #111 !important;
}
.dataTables_wrapper > div {
margin: 5px;
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even> .sorting_1,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd {
background-color: var(--darkRowColor);
color:var(--lightColor);
}
table.dataTable thead th {
position: relative;
background-image: none !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: "Font Awesome\ 5 Free";
}
table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
tbody tr:hover {
background-color: var(--darkColor) !important;
color: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:var(--lightColor) !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: none !important;
color:var(--darkColor) !important
}
.paginate_button.current:hover
{
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 1px solid #979797;
background: none !important;
border-radius: 50px !important;
background-color: #000 !important;
color: #fff !important;
}
CSS 2: (Red and Black combination)
:root {
--theadColor: #000;
--theadTextColor: #fff;
--darkColor:#000;
--lightColor:#fff;
--darkRowColor: #1b1d1b;
}
body {
font-family: "Open Sans", sans-serif;
}
table.dataTable {
border:1px solid #000;
background-color: #000;
}
th,tr,td
{
border-color: #000 !important;
}
thead {
background-color: var(--theadColor);
}
thead > tr,
thead > tr > th {
background-color: transparent;
color: var(--theadTextColor) !important;
font-weight: normal;
text-align: start;
}
table.dataTable thead th,
table.dataTable thead td {
border-bottom: 0px solid #111 !important;
}
.dataTables_wrapper > div {
margin: 5px;
}
table.dataTable.display tbody tr.even > .sorting_1,
table.dataTable.order-column.stripe tbody tr.even> .sorting_1,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr.odd > .sorting_1,
table.dataTable.order-column.stripe tbody tr.odd > .sorting_1,
table.dataTable.display tbody tr.odd {
background-color: var(--darkRowColor);
color:var(--lightColor);
}
table.dataTable thead th {
position: relative;
background-image: none !important;
}
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: "Font Awesome\ 5 Free";
}
table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
tbody tr:hover {
background-color: var(--darkColor) !important;
color: #fff;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:var(--lightColor) !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
background: none !important;
color:var(--darkColor) !important
}
.paginate_button.current:hover
{
background: none !important;
border-radius: 50px;
background-color: var(--theadColor) !important;
color:#fff !important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 1px solid #979797;
background: none !important;
border-radius: 50px !important;
background-color: #000 !important;
color: #fff !important;
}
Still looking for other combinations. Please see this post where you will find 3 more CSS designs on DataTable with Light UI.