SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Customize Appearance / Styles and Themes / Configure Themes
In This Topic
    Configure Themes
    In This Topic

    You can specify themes for cells, columns, rows, or the widget.

    You can use the themeFont method for the cell, row, or column. You can use the currentTheme method for the sheet.

    The following theme names can be used with the currentTheme method:

    The following image displays the accents that you can set for the theme colors.

    Accents available for theme color in SpreadJS

    Using Code

    This example sets the theme with the currentTheme method.

    JavaScript
    Copy Code
    activeSheet.currentTheme("Metro");
    

    Using Code

    This example sets theme colors.

    JavaScript
    Copy Code
    activeSheet.setColumnWidth(0, 22);
    activeSheet.setColumnWidth(1, 30);
    activeSheet.setColumnWidth(2, 22);
    activeSheet.getCell(1, 3, GC.Spread.Sheets.SheetArea.viewport).value("Theme Colors").themeFont("headings").hAlign(GC.Spread.Sheets.HorizontalAlign.center);
    activeSheet.addSpan(1, 3, 1, 10);
    activeSheet.getCell(2, 3, GC.Spread.Sheets.SheetArea.viewport).text("Background 1").themeFont("Body");
    activeSheet.getCell(2, 4, GC.Spread.Sheets.SheetArea.viewport).text("Text 1").themeFont("Body");
    activeSheet.getCell(2, 5, GC.Spread.Sheets.SheetArea.viewport).text("Background 2").themeFont("Body");
    activeSheet.getCell(2, 6, GC.Spread.Sheets.SheetArea.viewport).text("Text 2").themeFont("Body");
    activeSheet.getCell(2, 7, GC.Spread.Sheets.SheetArea.viewport).text("Accent 1").themeFont("Body");
    activeSheet.getCell(2, 8, GC.Spread.Sheets.SheetArea.viewport).text("Accent 2").themeFont("Body");
    activeSheet.getCell(2, 9, GC.Spread.Sheets.SheetArea.viewport).text("Accent 3").themeFont("Body");
    activeSheet.getCell(2, 10).text("Accent 4").themeFont("Body");
    activeSheet.getCell(2, 11).text("Accent 5").themeFont("Body");
    activeSheet.getCell(2, 12).text("Accent 6").themeFont("Body");
    activeSheet.getCell(3, 1).value("100").themeFont("Body");
    activeSheet.getCell(3, 3).backColor("Background 1");
    activeSheet.getCell(3, 4).backColor("Text 1");
    activeSheet.getCell(3, 5).backColor("Background 2");
    activeSheet.getCell(3, 6).backColor("Text 2");
    activeSheet.getCell(3, 7).backColor("Accent 1");
    activeSheet.getCell(3, 8).backColor("Accent 2");
    activeSheet.getCell(3, 9).backColor("Accent 3");
    activeSheet.getCell(3, 10).backColor("Accent 4");
    activeSheet.getCell(3, 11).backColor("Accent 5");
    activeSheet.getCell(3, 12).backColor("Accent 6");
    activeSheet.getCell(5, 1).value("80").themeFont("Body");
    activeSheet.getCell(5, 3).backColor("Background 1 80");
    activeSheet.getCell(5, 4).backColor("Text 1 80");
    activeSheet.getCell(5, 5).backColor("Background 2 80");
    activeSheet.getCell(5, 6).backColor("Text 2 80");
    activeSheet.getCell(5, 7).backColor("Accent 1 80");
    activeSheet.getCell(5, 8).backColor("Accent 2 80");
    activeSheet.getCell(5, 9).backColor("Accent 3 80");
    activeSheet.getCell(5, 10).backColor("Accent 4 80");
    activeSheet.getCell(5, 11).backColor("Accent 5 80");
    activeSheet.getCell(5, 12).backColor("Accent 6 80");
    activeSheet.getCell(6, 1).value("60").themeFont("Body");
    activeSheet.getCell(6, 3).backColor("Background 1 60");
    activeSheet.getCell(6, 4).backColor("Text 1 60");
    activeSheet.getCell(6, 5).backColor("Background 2 60");
    activeSheet.getCell(6, 6).backColor("Text 2 60");
    activeSheet.getCell(6, 7).backColor("Accent 1 60");
    activeSheet.getCell(6, 8).backColor("Accent 2 60");
    activeSheet.getCell(6, 9).backColor("Accent 3 60");
    activeSheet.getCell(6, 10).backColor("Accent 4 60");
    activeSheet.getCell(6, 11).backColor("Accent 5 60");
    activeSheet.getCell(6, 12).backColor("Accent 6 60");
    activeSheet.getCell(7, 1).value("40").themeFont("Body");
    activeSheet.getCell(7, 3).backColor("Background 1 40");
    activeSheet.getCell(7, 4).backColor("Text 1 40");
    activeSheet.getCell(7, 5).backColor("Background 2 40");
    activeSheet.getCell(7, 6).backColor("Text 2 40");
    activeSheet.getCell(7, 7).backColor("Accent 1 40");
    activeSheet.getCell(7, 8).backColor("Accent 2 40");
    activeSheet.getCell(7, 9).backColor("Accent 3 40");
    activeSheet.getCell(7, 10).backColor("Accent 4 40");
    activeSheet.getCell(7, 11).backColor("Accent 5 40");
    activeSheet.getCell(7, 12).backColor("Accent 6 40");
    activeSheet.getCell(8, 1).value("-25").themeFont("Body");
    activeSheet.getCell(8, 3).backColor("Background 1 -25");
    activeSheet.getCell(8, 4).backColor("Text 1 -25");
    activeSheet.getCell(8, 5).backColor("Background 2 -25");
    activeSheet.getCell(8, 6).backColor("Text 2 -25");
    activeSheet.getCell(8, 7).backColor("Accent 1 -25");
    activeSheet.getCell(8, 8).backColor("Accent 2 -25");
    activeSheet.getCell(8, 9).backColor("Accent 3 -25");
    activeSheet.getCell(8, 10).backColor("Accent 4 -25");
    activeSheet.getCell(8, 11).backColor("Accent 5 -25");
    activeSheet.getCell(8, 12).backColor("Accent 6 -25");
    activeSheet.getCell(9, 1).value("-50").themeFont("Body");
    activeSheet.getCell(9, 3).backColor("Background 1 -50");
    activeSheet.getCell(9, 4).backColor("Text 1 -50");
    activeSheet.getCell(9, 5).backColor("Background 2 -50");
    activeSheet.getCell(9, 6).backColor("Text 2 -50");
    activeSheet.getCell(9, 7).backColor("Accent 1 -50");
    activeSheet.getCell(9, 8).backColor("Accent 2 -50");
    activeSheet.getCell(9, 9).backColor("Accent 3 -50");
    activeSheet.getCell(9, 10).backColor("Accent 4 -50");
    activeSheet.getCell(9, 11).backColor("Accent 5 -50");
    activeSheet.getCell(9, 12).backColor("Accent 6 -50");
    
    See Also