How to Set a Dark Theme to a Spreadsheet Grid

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 SpreadJS Themes, which apply to the rest of the component (i.e. cell headers, tabs, scrollbars, etc.), the actual spreadsheet grid itself must be styled separately with JS code.

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.