How to Set Dark Theme to a Spreadsheet

There may be an instance where you are putting together a theme for SpreadJS and you want to make the entire component - including the spreadsheet - appear darker. Unlike the SpreadJS Theme, which is applied to the rest of the component (i.e. cell headers, tabs, scrollbars, etc.), the actual spreadsheet itself must be styled separately. This can be done outside of CSS.

For example, you might have the Excel 2016 Black theme applied to your component similarly to the below:

To set our cells in accordance with a darker theme like the Excel 2016 Black theme, we can accomplish this by applying a Style to the entire worksheet.

One method of accomplishing this is by looping through the entire sheet and applying our own properties to the default style. Refer to the following code:

	for (var index = 0, count = spread.getSheetCount(); index < count; index++) {
        var sheet = spread.getSheet(index);
        var style = sheet.getDefaultStyle();
        style.backColor = "#262626";
        style.foreColor = "white";
        style.borderLeft = new GC.Spread.Sheets.LineBorder("#575757",GC.Spread.Sheets.LineStyle.thin);
        style.borderTop = new GC.Spread.Sheets.LineBorder("#575757",GC.Spread.Sheets.LineStyle.thin);
        style.borderRight = new GC.Spread.Sheets.LineBorder("#575757",GC.Spread.Sheets.LineStyle.thin);
        style.borderBottom = new GC.Spread.Sheets.LineBorder("#575757",GC.Spread.Sheets.LineStyle.thin);
        sheet.setDefaultStyle(style);
    }

The backColor applies to the color of the cells themselves, while foreColor applies to any text in a cell. We can use the LineBorder properties to style the cell borders and adjust thickness.

With the above code, we get the following results: