Document Theme

SpreadJS supports themes that let you define the overall style, including setting fonts and colors for the JavaScript spreadsheet UI.

Description
app.js
index.html
styles.css
Copy to CodeMine

SpreadJS provides built-in themes. You can use the currentTheme method to get and set the current theme for the sheet, for example:

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    var sheet = spread.getActiveSheet();
    sheet.currentTheme(GC.Spread.Sheets.Themes.Civic);

You can use the theme colors or standard colors to set cells' foreColor or backColor methods, as shown in this example.

    var spread = GC.Spread.Sheets.findControl(document.getElementById('ss'));
    var sheet = spread.getActiveSheet();
    sheet.getCell(1,1).foreColor('Accent 1 50');
    sheet.getCell(1,1).backColor('Background 2 80');
SpreadJS provides built-in themes. You can use the currentTheme method to get and set the current theme for the sheet, for example: You can use the theme colors or standard colors to set cells' foreColor or backColor methods, as shown in this example.
var spreadNS = GC.Spread.Sheets; function getElement (id) { return document.getElementById(id); } window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.suspendPaint(); sheet.setColumnWidth(0, 22); sheet.setColumnWidth(1, 30); sheet.setColumnWidth(2, 22); sheet.getCell(1, 3).value("Theme Colors").themeFont("headings").hAlign(spreadNS.HorizontalAlign.center); sheet.addSpan(1, 3, 1, 10); sheet.getCell(2, 3).text("Background 1").themeFont("Body"); sheet.getCell(2, 4).text("Text 1").themeFont("Body"); sheet.getCell(2, 5).text("Background 2").themeFont("Body"); sheet.getCell(2, 6).text("Text 2").themeFont("Body"); sheet.getCell(2, 7).text("Accent 1").themeFont("Body"); sheet.getCell(2, 8).text("Accent 2").themeFont("Body"); sheet.getCell(2, 9).text("Accent 3").themeFont("Body"); sheet.getCell(2, 10).text("Accent 4").themeFont("Body"); sheet.getCell(2, 11).text("Accent 5").themeFont("Body"); sheet.getCell(2, 12).text("Accent 6").themeFont("Body"); sheet.getCell(4, 1).value("0").themeFont("Body"); sheet.getCell(4, 3).backColor("Background 1"); sheet.getCell(4, 4).backColor("Text 1"); sheet.getCell(4, 5).backColor("Background 2"); sheet.getCell(4, 6).backColor("Text 2"); sheet.getCell(4, 7).backColor("Accent 1"); sheet.getCell(4, 8).backColor("Accent 2"); sheet.getCell(4, 9).backColor("Accent 3"); sheet.getCell(4, 10).backColor("Accent 4"); sheet.getCell(4, 11).backColor("Accent 5"); sheet.getCell(4, 12).backColor("Accent 6"); sheet.getCell(5, 1).value("80").themeFont("Body"); sheet.getCell(5, 3).backColor("Background 1 80"); sheet.getCell(5, 4).backColor("Text 1 80"); sheet.getCell(5, 5).backColor("Background 2 80"); sheet.getCell(5, 6).backColor("Text 2 80"); sheet.getCell(5, 7).backColor("Accent 1 80"); sheet.getCell(5, 8).backColor("Accent 2 80"); sheet.getCell(5, 9).backColor("Accent 3 80"); sheet.getCell(5, 10).backColor("Accent 4 80"); sheet.getCell(5, 11).backColor("Accent 5 80"); sheet.getCell(5, 12).backColor("Accent 6 80"); sheet.getCell(6, 1).value("60").themeFont("Body"); sheet.getCell(6, 3).backColor("Background 1 60"); sheet.getCell(6, 4).backColor("Text 1 60"); sheet.getCell(6, 5).backColor("Background 2 60"); sheet.getCell(6, 6).backColor("Text 2 60"); sheet.getCell(6, 7).backColor("Accent 1 60"); sheet.getCell(6, 8).backColor("Accent 2 60"); sheet.getCell(6, 9).backColor("Accent 3 60"); sheet.getCell(6, 10).backColor("Accent 4 60"); sheet.getCell(6, 11).backColor("Accent 5 60"); sheet.getCell(6, 12).backColor("Accent 6 60"); sheet.getCell(7, 1).value("40").themeFont("Body"); sheet.getCell(7, 3).backColor("Background 1 40"); sheet.getCell(7, 4).backColor("Text 1 40"); sheet.getCell(7, 5).backColor("Background 2 40"); sheet.getCell(7, 6).backColor("Text 2 40"); sheet.getCell(7, 7).backColor("Accent 1 40"); sheet.getCell(7, 8).backColor("Accent 2 40"); sheet.getCell(7, 9).backColor("Accent 3 40"); sheet.getCell(7, 10).backColor("Accent 4 40"); sheet.getCell(7, 11).backColor("Accent 5 40"); sheet.getCell(7, 12).backColor("Accent 6 40"); sheet.getCell(8, 1).value("-25").themeFont("Body"); sheet.getCell(8, 3).backColor("Background 1 -25"); sheet.getCell(8, 4).backColor("Text 1 -25"); sheet.getCell(8, 5).backColor("Background 2 -25"); sheet.getCell(8, 6).backColor("Text 2 -25"); sheet.getCell(8, 7).backColor("Accent 1 -25"); sheet.getCell(8, 8).backColor("Accent 2 -25"); sheet.getCell(8, 9).backColor("Accent 3 -25"); sheet.getCell(8, 10).backColor("Accent 4 -25"); sheet.getCell(8, 11).backColor("Accent 5 -25"); sheet.getCell(8, 12).backColor("Accent 6 -25"); sheet.getCell(9, 1).value("-50").themeFont("Body"); sheet.getCell(9, 3).backColor("Background 1 -50"); sheet.getCell(9, 4).backColor("Text 1 -50"); sheet.getCell(9, 5).backColor("Background 2 -50"); sheet.getCell(9, 6).backColor("Text 2 -50"); sheet.getCell(9, 7).backColor("Accent 1 -50"); sheet.getCell(9, 8).backColor("Accent 2 -50"); sheet.getCell(9, 9).backColor("Accent 3 -50"); sheet.getCell(9, 10).backColor("Accent 4 -50"); sheet.getCell(9, 11).backColor("Accent 5 -50"); sheet.getCell(9, 12).backColor("Accent 6 -50"); sheet.resumePaint(); getElement('currentThemes').onchange = function (e) { var sheet = spread.getActiveSheet(); sheet.currentTheme(e.target.value); spread.invalidateLayout(); spread.repaint(); }; getElement('theme_type').onchange = function (e) { var selectElement = getElement('theme_index'); while (selectElement.firstChild) { selectElement.removeChild(selectElement.firstChild); } var options = [1, 2]; var themeType = e.target.value; if (themeType == "Accent") { options = [1, 2, 3, 4, 5, 6]; } options.forEach(function (option) { var optionElement = document.createElement('option'); optionElement.value = option.toString(); optionElement.text = option.toString(); selectElement.appendChild(optionElement); }); }; getElement('btnSetForeground').onclick = function () { var sheet = spread.getActiveSheet(); var brightness = parseInt(getElement('theme_brightness').value); if (isNaN(brightness)) return; if (brightness < -100) { brightness = -100; } else if (brightness > 100) { brightness = 100; } var themeColor = getElement('theme_type').value + " " + getElement('theme_index').value + " " + brightness.toString(); sheet.getSelections().forEach(function(range) { var actualRange = getActualCellRange(range, sheet.getRowCount(), sheet.getColumnCount()); sheet.getRange(actualRange.row, actualRange.col, actualRange.rowCount, actualRange.colCount).foreColor(themeColor); }); }; getElement('btnSetBackground').onclick = function () { var sheet = spread.getActiveSheet(); var brightness = parseInt(getElement('theme_brightness').value); if (isNaN(brightness)) return; if (brightness < -100) { brightness = -100; } else if (brightness > 100) { brightness = 100; } var themeColor = getElement('theme_type').value + " " + getElement('theme_index').value + " " + brightness.toString(); sheet.getSelections().forEach(function(range) { var actualRange = getActualCellRange(range, sheet.getRowCount(), sheet.getColumnCount()); sheet.getRange(actualRange.row, actualRange.col, actualRange.rowCount, actualRange.colCount).backColor(themeColor); }); }; function getActualCellRange(cellRange, rowCount, columnCount) { if (cellRange.row == -1 && cellRange.col == -1) { return new spreadNS.Range(0, 0, rowCount, columnCount); } else if (cellRange.row == -1) { return new spreadNS.Range(0, cellRange.col, rowCount, cellRange.colCount); } else if (cellRange.col == -1) { return new spreadNS.Range(cellRange.row, 0, cellRange.rowCount, columnCount); } return cellRange; } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p> Use these options to define the color that you want to use for the "Set Background" and "Set Foreground" buttons for the cells that are currently selected. </p> <div class="option-row"> <label>Changed Document Theme:</label> <select id="currentThemes" class="position"> <option>Default</option> <option selected>Office</option> <option>Apex</option> <option>Aspect</option> <option>Concourse</option> <option>Civic</option> <option>Oriel</option> <option>Origin</option> <option>Paper</option> <option>Solstice</option> <option>Technic</option> <option>Trek</option> <option>Urban</option> <option>Verve</option> <option>Equity</option> <option>Flow</option> <option>Foundry</option> <option>Median</option> <option>Metro</option> <option>Module</option> <option>Opulent</option> </select> </div> <div class="option-row"> <select id="theme_type" class="position"> <option value="Accent">Accent</option> <option value="Background">Background</option> <option value="Text">Text</option> </select> <select id="theme_index" class="position"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> </div> <div class="option-row"> <label for="theme_brightness">Brightness(-100 - 100):</label> <input id="theme_brightness" value="50"/> </div> <div class="option-row"> <input type="button" value="Set Background" id="btnSetBackground" /> <input type="button" value="Set Foreground" id="btnSetForeground" /> </div> </div> </div> </body> </html>
.sample { position: relative; height: 100%; overflow: auto; } .sample::after { display: block; content: ""; clear: both; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } p { margin: 0; padding: 6px 12px; background-color:#F4F8EB } input, select { padding: 4px 6px; box-sizing: border-box; margin-top: 6px; } .options-toggle { display: none; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }