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.
You can specify the theme font directly through the GC.Spread.Sheets.Theme, or use the GC.Spread.Sheets.ThemeFont to define precisely:
When it's in the East Asian culture, you could specify the fontScriptCode on the cultureInfo firstly, the current theme font will used the East Asian font rather than the Latin font:
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<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" @change="updateCurrentTheme($event)">
<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" @change="onThemeTypeChanged($event)">
<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" @click="onApplyThemeColor($event, 'backColor')" />
<input type="button" value="Set Foreground" @click="onApplyThemeColor($event, 'foreColor')" />
</div>
<p>
Changing Culture exports to an Excel file and imports it which will apply a font depending on the culture to show text and measure column width.
</p>
<div class="option-row">
<label>Theme Font From Culture:</label>
<select id="cultureName" @change="updateCulture($event)">
<option value="en-us" selected>English</option>
<option value="zh-cn">Chinese</option>
<option value="ja-jp">Japanese</option>
<option value="ko-kr">Korean</option>
</select>
</div>
</div>
</div>
</template>
<script setup>
import GC from "@mescius/spread-sheets";
import { ref } from "vue";
import '@mescius/spread-sheets-io';
import '@mescius/spread-sheets-resources-zh';
import '@mescius/spread-sheets-resources-ja';
import '@mescius/spread-sheets-resources-ko';
import "@mescius/spread-sheets-vue";
var spreadNS = GC.Spread.Sheets;
function getElementById(id) {
return document.getElementById(id);
}
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;
}
function exportImportSpread(spread, beforeImport) {
return new Promise((resolve, reject) => {
try {
spread.export(function (blob) {
beforeImport();
spread.import(blob, resolve, reject);
}, function (e) {
reject(e);
}, { fileType: GC.Spread.Sheets.FileType.excel });
} catch (e) {
reject(e);
}
});
}
const spreadRef = ref(null);
let initSpread = function (spread) {
spreadRef.value = 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();
GC.Spread.Common.CultureManager.culture(getElementById('cultureName').value);
}
const updateCurrentTheme = (e) => {
var spread = spreadRef.value;
var sheet = spread.getActiveSheet();
sheet.currentTheme(e.target.value);
spread.invalidateLayout();
spread.repaint();
}
const updateCulture = (e) =>{
var spread = spreadRef.value;
exportImportSpread(spread, () => {
let cultureName = e.target.value, fontScriptCode = {
'zh-cn': 'Hans',
'ja-jp': 'Jpan',
'ko-kr': 'Hang',
}[cultureName];
GC.Spread.Common.CultureManager.getCultureInfo(cultureName).fontScriptCode = fontScriptCode;
GC.Spread.Common.CultureManager.culture(cultureName);
});
}
const onThemeTypeChanged = (e) => {
var selectElement = getElementById('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);
});
}
const onApplyThemeColor = (e, colorType) => {
var sheet = spreadRef.value.getActiveSheet();
var brightness = parseInt(getElementById('theme_brightness').value);
if (isNaN(brightness)) return;
if (brightness < -100) {
brightness = -100;
} else if (brightness > 100) {
brightness = 100;
}
var themeColor = getElementById('theme_type').value + " " + getElementById('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)[colorType](themeColor);
});
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
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;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/en/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/en/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-io': 'npm:@mescius/spread-sheets-io/index.js',
'@mescius/spread-sheets-resources-zh': 'npm:@mescius/spread-sheets-resources-zh/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
