- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
-
Features
- Workbook
- Worksheet
- Rows and Columns
- Headers
- Cells
- Data Binding
- TableSheet
- GanttSheet
- JSON Schema with SpreadJS
- SpreadJS File Format
- Data Validation
- Conditional Formatting
- Sort
- Group
- Formulas
- Serialization
- Keyboard Actions
- Shapes
- Form Controls
- Floating Objects
- Barcodes
- Charts
- Sparklines
- Tables
- Pivot Table
- Slicer
- Theme
- Culture
- SpreadJS Designer
- SpreadJS Designer Component
- Touch Support
- Formula Reference
- Import and Export Reference
- Frequently Used Events
- API Documentation
- Release Notes
Configure 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:
Themes | ||
|---|---|---|
Default | Office | Apex |
Aspect | Concourse | Civic |
Oriel | Origin | Paper |
Solstice | Technic | Trek |
Urban | Verve | Equity |
Flow | Foundry | Median |
Metro | Module | Opulent |
The following image displays the accents that you can set for the theme colors.
The following code sample sets the theme with the currentTheme method.
activeSheet.currentTheme("Metro");The following code sample sets theme colors.
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");