# Themes and Style

## Content

SpreadJS allows you to apply themes and styles over the pivot table to change its appearance.

## Themes

SpreadJS provides 29 light, 28 medium, and 28 dark predefined themes which can be applied to a pivot table. The following image shows the light10 theme:

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/pt-theme.png)

You can change the theme of a pivot table in one of the following ways:

* Set the theme while adding a pivot table to the spreadsheet. Refer to the following sample code.

    ```javascript
    var myPivotTable = sheet.pivotTables.add("myPivotTable", "tableSales", 1, 1, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.light10);
    ```
* Set the theme by using `theme` option shown below.

    ```javascript
    myPivotTable.theme(GC.Spread.Pivot.PivotTableThemes.light10);
    ```

## Style

You can apply a pivot table style to highlight any specific data. The **style** method can be used to apply styles to row and column fields. The following image shows the style for column fields of a pivot table.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/style1.png)

The following code sample shows how to apply style for column fields.

```javaScript
function setMarkSubtotalPivotTableStyle(pivotTable) {
    // create style to mark Qtr Total's in specific color
    let style = new GC.Spread.Sheets.Style();
    style.backColor = "#03A685";
    let subtotalLabelPivotArea = {
        labelOnly: true,
        references: [{
            fieldName: "Qt",
            subtotal: true,
            items: ["Qtr1", "Qtr2", "Qtr3", "Qtr4"]
        }]
    };
    // set style to mark Qtr Total's in specific color
    pivotTable.setStyle(subtotalLabelPivotArea, style);
    let subtotalDataPivotArea = {
        dataOnly: true,
        references: [{
            fieldName: "Qtr",
            subtotal: true,
            items: ["Qtr1", "Qtr2", "Qtr3", "Qtr4"]
        }]
    };
    pivotTable.setStyle(subtotalDataPivotArea, style);
}
```

The following image shows the style for row fields of a pivot table.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/style2.png)

The following code sample shows how to apply style for row fields.

```javaScript
function setMarkSeattlePivotTableStyle(pivotTable) {
    // create and set style to mark row with "Seattle" City
    let seattlePivotArea = {
        references: [{
            fieldName: "City",
            items: ["Seattle"],
            applyLabel: true,
            applyData: true,
            applyGrandTotal: true,
            applySubtotal: true
        }]
    };
    let style = new GC.Spread.Sheets.Style();
    style.backColor = "yellow";
    pivotTable.setStyle(seattlePivotArea, style);
}        
```