# Create and Customize Page Layout Themes

## Content

Themes in SpreadJS can change the appearance of a worksheet. Themes are created using a variety of colors and fonts. They can help you create visually appealing data while highlighting important details.
SpreadJS provides built-in themes. However, you can also manually create custom themes to give the worksheet a unique appearance. You can also customize the colors and fonts of the current theme if required.
By default, the theme settings are only applied to the active sheet. To apply the theme settings to all open worksheets, set the `ApplyThemeToAllSheets` property to true.

```javascript
// Apply theme to all worksheets.
designer.setData("ApplyThemeToAllSheets", true);
```

In the SpreadJS Designer Component, the **Themes** button is available inside the PAGE LAYOUT > Themes tab group.

![ThemesGroup](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/ThemesGroup.74f30b.png?width=950)

## Themes

You can select the desired theme from the available **Themes** dropdown list. When the mouse hovers over a theme listed in the dropdown, you can see the preview on the worksheet as shown below.
![ApplyThemes](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/ApplyThemes.e8a4a2.gif?width=800)

**Create Custom Theme**
To create a custom theme, you need to modify the `dropdownList` property on the command. The following sample adds a new theme ‘My Custom Theme' to the themes collection in SpreadJS Designer Component.

```javascript
// Create custom theme.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
let themeCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeSetting);
let customTheme = new GC.Spread.Sheets.Theme("customTheme1", GC.Spread.Sheets.ThemeColors.Apex, "Tw Cen MT", "Tw Cen MT");
themeCommand.dropdownList = [{ text: "My Custom Theme", value: JSON.stringify(customTheme) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// Add custom theme.
config.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeSetting] = themeCommand;
```

The new custom theme is displayed in the **Themes** dropdown list.

![customThemes](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/customThemes.5c3478.png?width=246)

## Theme Colors

The theme color represents the color scheme applied to text, backgrounds, accents, hyperlinks, etc. For this, you need to click the drop-down icon associated with the **Colors** button. Then select the desired color scheme from the list and the colors in the worksheet will be changed as per the selection. When the mouse hovers over a listed color scheme in the dropdown, you can see the preview on the worksheet as shown below.

![ApplyColors](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/ApplyColors.812d13.gif?width=800)

**Create Custom Theme Color**
To create a new custom color scheme, you need to modify the `dropdownList` property on commands. The following sample adds a new theme color called 'My Custom Color' to the colors collection in the SpreadJS Designer Component.

```javascript
// Create custom theme color.
let themeColorCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeColors);
let customColorScheme = new GC.Spread.Sheets.ColorScheme("myColor", "#ffffff", "#dbeff9", "#000000", "#17406d", "#0f6fc6", "#009dd9", "#0bd0d9", "#10cf9b", "#7cca62", "#a5c249", "#51c3f9", "#4eb3cf");
themeColorCommand.dropdownList = [{ text: "My Custom Color", value: JSON.stringify(customColorScheme) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// Add custom theme.
colorconfig.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeColors] = themeColorCommand;
```

The new custom color scheme is displayed in the **Colors** dropdown list.

![customColors](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/customColors.d91c45.png?width=285)

## Theme Fonts

The heading, body, column header, and row header text font styles of a worksheet can be changed using theme fonts. For this, you need to click the drop-down icon associated with the **Fonts** button. Then select the desired font style from the list and the fonts in the worksheet will be changed as per the selection. When the mouse hovers over the listed font styles in the dropdown, you can see the preview on the worksheet as shown below.

![ApplyFonts](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/ApplyFonts.eb8222.gif?width=800)

**Create Custom Theme Font**
To create new custom theme fonts, you need to modify the `dropdownList` property value on commands. The following sample adds a new theme font called 'My Custom Font' to the fonts collection in the SpreadJS Designer Component.

```javascript
// Create custom theme font.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 2 });
let themeFontCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.ThemeFonts);
let customThemeFont = new GC.Spread.Sheets.ThemeFont('MyFont', 'Tw Cen MT', 'Rockwell');
themeFontCommand.dropdownList = [{ text: "My Custom Font", value: JSON.stringify(customThemeFont) }];
let config = GC.Spread.Sheets.Designer.DefaultConfig;
if (!config.commandMap) config.commandMap = {};
// Add custom theme font.
config.commandMap[GC.Spread.Sheets.Designer.CommandNames.ThemeFonts] = themeFontCommand;
```

The new custom font is displayed in the **Fonts** dropdown list.

![customFonts](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/customFonts.16cae2.png?width=285)

## Using Designer

You can also customize the colors and fonts of the selected theme using SpreadJS Designer.
To customize the current color scheme, click on '**Customize Color…**' at the bottom of the **Colors** dropdown list. In the **Customize Theme Color** dialog, select the required color scheme for the text, background, accents, hyperlinks, etc. Note that in the **Sample** box, you will get a preview of the changes you have made.

![customizeThemeColors](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/customizeThemeColors.cc8169.png?width=506)

In addition, you can also customize fonts by clicking on the '**Customize Font...**' at the bottom of the **Fonts** dropdown list. In the **Customize Theme Font** dialog, select the required fonts for the heading and body. On selecting, you can see the preview of the selected fonts in the **Sample** box.

![customizeThemeFonts](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/df1fe1ee-eb3c-4da7-8c20-a0d8d2b7e734/customizeThemeFonts.bfde50.png?width=357)

### Limitation

Currently, the theme settings on SpreadJS Designer do not support undo and redo functions.