# Theme

## Content

You can create a style and assign the style to a cell, row, column, or sheet. You can also set themes for the SpreadJS control. You can set a current theme, an Excel theme, a bootstrap theme, or create a custom jQuery theme using the ThemeRoller.

## Default SpreadJS Theme

You can use the default SpreadJS theme. This requires that a style link is added to the head section of the aspx page. For example:

`<link rel="stylesheet" href="css/gc.spread.sheets.x.x.x.css" />`

## Excel Theme

You can use an Excel theme or style in SpreadJS. This requires that a style link is added to the head section of the aspx page. For example:

`<link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />`

The following themes are available:

| **Name** | **CSS File** | Snapshots |
| ---- | -------- | --------- |
| Excel 2013 White | gc.spread.sheets.excel2013white.x.x.x.css | ![excel2013white-theme.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/excel2013white-theme.db07b9.png) |
| Excel 2013 Light Gray | gc.spread.sheets.excel2013lightGray.x.x.x.css | ![excel2013lightgray-theme.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/excel2013lightgray-theme.9a0c30.png) |
| Excel 2013 Dark Gray | gc.spread.sheets.excel2013darkGray.x.x.x.css | ![excel2013darkgray-theme.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/excel2013darkgray-theme.fb38bc.png) |
| Excel 2016 Colorful | gc.spread.sheets.excel2016colorful.x.x.x.css | ![excel2016colorful-theme.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/excel2016colorful-theme.1c53d0.png) |
| Excel 2016 Dark Gray | gc.spread.sheets.excel2016darkGray.x.x.x.css | ![excel2016darkgray-theme.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/excel2016darkgray-theme.071b76.png) |
| Excel 2016 Black | gc.spread.sheets.excel2016black.x.x.x.css | ![excel2016black-theme.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/excel2016black-theme.1c6d9e.png) |

You can also combine the Excel theme with other themes such as the bootstrap theme. For example:
`<link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />`
`<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" title="aa" />`
`<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css" title="aa" />`

Use the [refresh](/spreadjs/api/v17/classes/GC.Spread.Sheets.Workbook#refresh) method if you change a theme.

## Bootstrap Theme

You can use a bootstrap theme with SpreadJS. This requires that a style link is added to the head section of the aspx page after the SpreadJS style link. For example, if you have bootstrap.css and bootstrap-theme.css in your project in the CSS folder, you can add the following style links.

`<link href=”css/gc.spread.sheets.x.xx.xxxxx.x.css” rel=”stylesheet” type=”text/css” />`
`<link rel="stylesheet" href="css/bootstrap.css" />`
`<link rel="stylesheet" href="css/bootstrap-theme.css" />`

To configure themes or create a custom theme using ThemeRoller, refer to the following topics.

* [Configure Themes](/spreadjs/docs/v17/features/styletheme/themes)
* [Custom Themes from ThemeRoller](/spreadjs/docs/v17/features/styletheme/themeroller)