jquery-tablesorter theme color

Question

My Ruby on Rails 4 application is using jQuery Tablesorter. I am using the UITheme but the color is gray. I want to change the theme's color.

I was thinking of manually setting the tables element's styling in custom.css.scss like this (from the jQuery UI CSS Framework 1.10.4):

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3/*{borderColorDefault}*/;
background: #e6e6e6/*{bgColorDefault}*/ url(/assets/jquery-ui/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
font-weight: normal/*{fwDefault}*/;
color: #555555/*{fcDefault}*/;
}

But there has to be tablesorter.theme option I cannot find to change the color. Any reference or answer appreciated.

Here is the documentation link. They have a drop down to change the theme style but it doesn't say how to change it in the code.

Answer 1

The minimum setup required to add a jQuery UI theme is as follows:

Page header

<!-- ui theme stylesheet - needed so the selected ui theme works with tablesorter -->
<link rel="stylesheet" href="../css/theme.jui.css">
<!-- jQuery UI theme (cupertino example here) -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/cupertino/jquery-ui.css">

<!-- tablesorter plugin -->
<script src="../js/jquery.tablesorter.js"></script>
<!-- tablesorter widget file - needed for the "uitheme" widget -->
<script src="../js/jquery.tablesorter.widgets.js"></script>

Script

$("table").tablesorter({   
  theme : 'jui', // use theme.jui.css  
  headerTemplate : '{content} {icon}', // needed to add icon for jui theme
  // apply the uitheme widget, include zebra striping widget as desired
  widgets : ['uitheme', 'zebra']
});

So, if you want to change the theme, load in a different jQuery UI theme.

The dropdown in that demo is created by this plugin: https://github.com/pontikis/jui_theme_switch/