SpreadJS Documentation > Developer's Guide > Customizing the Appearance > Setting Styles and Themes > Using Themes |
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.
This example sets the theme with the currentTheme method.
JavaScript |
Copy Code
|
---|---|
activeSheet.currentTheme("Metro"); activeSheet.isPaintSuspended(false); activeSheet.repaint(); |
This example sets theme colors.
JavaScript |
Copy Code
|
---|---|
activeSheet.isPaintSuspended(true); activeSheet.setColumnWidth(0, 22); activeSheet.setColumnWidth(1, 30); activeSheet.setColumnWidth(2, 22); activeSheet.getCell(1, 3).value("Theme Colors").themeFont("headings").hAlign(GcSpread.Sheets.HorizontalAlign.center); activeSheet.addSpan(1, 3, 1, 10); activeSheet.getCell(2, 3).text("Background 1").themeFont("Body"); activeSheet.getCell(2, 4).text("Text 1").themeFont("Body"); activeSheet.getCell(2, 5).text("Background 2").themeFont("Body"); activeSheet.getCell(2, 6).text("Text 2").themeFont("Body"); activeSheet.getCell(2, 7).text("Accent 1").themeFont("Body"); activeSheet.getCell(2, 8).text("Accent 2").themeFont("Body"); activeSheet.getCell(2, 9).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"); activeSheet.isPaintSuspended(false); |