Excel Themes and Colors
How to Apply and Create Color Scheme in Excel
Document themes make it easy to coordinate colors, fonts, and graphic formatting effects of Excel documents and update them quickly.
Themes provide a unified look with named styles, graphical effects, and other objects used in a workbook. For example, the Accent1 style looks different in the Office and the Apex themes. Often, you apply a document theme and then amend it to how you want it.
How to Apply a Color Scheme in Excel
- Open Excel and go to the “Page Layout” tab in the Excel ribbon.
- Click on the “Colors” button in the “Themes” section.
- Choose a color palette that matches your requirements or hover over a scheme to see a live preview.
How to Create a Custom Color Scheme in Excel
You can create your own color set to give your document a fresh, unique look or comply with your organization’s brand standards.
-
Open Excel and go to the “Page Layout” tab in the Excel ribbon.
-
Click on the “Colors” button in the “Themes” section.
-
Click “Customize Colors…” button.
-
In the “Create New Theme Colors” dialog box, you can select colors for each element by clicking on the color dropdowns next to them. You can choose colors from the palette or define custom colors using the “More Colors” option.
-
After selecting all the desired colors, provide a name for your custom color scheme in the “Name” field.
-
Click on the “Save” button to save your custom color scheme. Your custom color scheme will now be available in the “Colors” drop-down menu for future use.
How to Create and Apply Color Scheme in Aspose.Cells
Aspose.Cells provides features for customizing themes and colors.
How to Create Custom Color Theme in Aspose.Cells
If theme colors are used in the file, we don’t need to modify each cell individually; we just need to modify the colors in the theme.
The following example shows how to apply custom themes with your desired colors. We use a sample template file manually created in Microsoft Excel 2007.
The following example loads a template XLSX file, defines colors for different theme color types, applies the custom colors, and saves the Excel file.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Apply Custom Theme Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, Color } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiating a Workbook object by opening the uploaded Excel file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Define Color array (of 12 colors) for Theme.
const carr = [
new Color("AntiqueWhite"), // Background1
new Color("Brown"), // Text1
new Color("AliceBlue"), // Background2
new Color("Yellow"), // Text2
new Color("YellowGreen"), // Accent1
new Color("Red"), // Accent2
new Color("Pink"), // Accent3
new Color("Purple"), // Accent4
new Color("PaleGreen"), // Accent5
new Color("Orange"), // Accent6
new Color("Green"), // Hyperlink
new Color("Gray") // Followed Hyperlink
];
// Set the custom theme with specified colors.
workbook.customTheme("CustomeTheme1", carr);
// Save as the excel file.
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Modified Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Custom theme applied successfully! Click the download link to get the modified file.</p>';
});
</script>
</html>
How to Apply Theme Colors in Aspose.Cells
The following example applies a cell’s foreground and font colors based on the default theme (of the workbook) color types. It also saves the Excel file to disk.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Aspose.Cells Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
// Instantiate a Workbook.
const workbook = new Workbook();
// Get cells collection in the first (default) worksheet.
const cells = workbook.worksheets.get(0).cells;
// Get the D3 cell.
const c = cells.get("D3");
// Get the style of the cell.
const s = c.style;
// Set foreground color for the cell from the default theme Accent2 color.
s.foregroundThemeColor = new AsposeCells.ThemeColor(AsposeCells.ThemeColorType.Accent2, 0.5);
// Set the pattern type.
s.pattern = AsposeCells.BackgroundType.Solid;
// Get the font for the style.
const f = s.font;
// Set the theme color.
f.themeColor = new AsposeCells.ThemeColor(AsposeCells.ThemeColorType.Accent4, 0.1);
// Apply style.
c.style = s;
// Put a value.
c.value = "Testing1";
// Save the excel file and provide download link.
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Excel File';
document.getElementById('result').innerHTML = '<p style="color: green;">Workbook created. Click the download link to save the file.</p>';
});
</script>
</html>
How to Get and Set Theme Colors in Aspose.Cells
Below are a few methods and properties that implement theme colors.
- Style.foregroundThemeColor: Used to set the foreground color.
- Style.backgroundThemeColor: Used to set the background color.
- Font.themeColor: Used to set the font color.
- Workbook.themeColor: Used to get a theme color.
- Workbook.themeColor: Used to set a theme color.
The following example shows how to get and set theme colors.
The following example uses a template XLSX file, gets the colors for different theme color types, changes the colors, and saves the Microsoft Excel file.
<!DOCTYPE html>
<html>
<head>
<title>Aspose.Cells Example</title>
</head>
<body>
<h1>Theme Color Example</h1>
<input type="file" id="fileInput" accept=".xls,.xlsx,.csv" />
<button id="runExample">Run Example</button>
<a id="downloadLink" style="display: none;">Download Result</a>
<div id="result"></div>
</body>
<script src="aspose.cells.js.min.js"></script>
<script type="text/javascript">
const { Workbook, SaveFormat, Color, ThemeColorType } = AsposeCells;
AsposeCells.onReady({
license: "/lic/aspose.cells.enc",
fontPath: "/fonts/",
fontList: [
"arial.ttf",
"NotoSansSC-Regular.ttf"
]
}).then(() => {
console.log("Aspose.Cells initialized");
});
document.getElementById('runExample').addEventListener('click', async () => {
const fileInput = document.getElementById('fileInput');
if (!fileInput.files.length) {
document.getElementById('result').innerHTML = '<p style="color: red;">Please select an Excel file.</p>';
return;
}
const file = fileInput.files[0];
const arrayBuffer = await file.arrayBuffer();
// Instantiating a Workbook object and opening the uploaded Excel file
const workbook = new Workbook(new Uint8Array(arrayBuffer));
// Get the Background1 theme color.
let c = workbook.themeColor(ThemeColorType.Background1);
console.log("theme color Background1: ", c);
// Get the Accent2 theme color.
c = workbook.themeColor(ThemeColorType.Accent2);
console.log("theme color Accent2: ", c);
// Change the Background1 theme color.
workbook.themeColor(ThemeColorType.Background1, Color.Red);
// Get the updated Background1 theme color.
c = workbook.themeColor(ThemeColorType.Background1);
console.log("theme color Background1 changed to: ", c);
// Change the Accent2 theme color.
workbook.themeColor(ThemeColorType.Accent2, Color.Blue);
// Get the updated Accent2 theme color.
c = workbook.themeColor(ThemeColorType.Accent2);
console.log("theme color Accent2 changed to: ", c);
// Saving the updated file
const outputData = workbook.save(SaveFormat.Xlsx);
const blob = new Blob([outputData]);
const downloadLink = document.getElementById('downloadLink');
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'output.out.xlsx';
downloadLink.style.display = 'block';
downloadLink.textContent = 'Download Updated Excel File';
// Display results
let resultHtml = '';
resultHtml += `<p>theme color Background1: ${JSON.stringify(workbook.themeColor(ThemeColorType.Background1))}</p>`;
resultHtml += `<p>theme color Accent2: ${JSON.stringify(workbook.themeColor(ThemeColorType.Accent2))}</p>`;
document.getElementById('result').innerHTML = '<p style="color: green;">Operation completed successfully! See console for detailed logs.</p>' + resultHtml;
});
</script>
</html>