I am currently creating a customizable web application, and I would like to be able to define the color scheme for the app using a google sheet. While I have managed to achieve this by following the steps below, I am hoping someone can provide a more efficient solution that allows the correct colors to be displayed upon initial load without waiting for JavaScript to execute.
For instance, to set the background color, I utilize a google sheet with the background color specified in hexadecimal format in cell "B1" on the "Data" sheet. The script attached to the sheet consists of four files: Code.gs, page.html, page-css.html, and page-js.html.
Code.gs:
function doGet() {
const html = HtmlService.createTemplateFromFile("page");
return html.evaluate();
}
function getColours(){
const ss = SpreadsheetApp.getActiveSpreadsheet();
const dataSheet = ss.getSheetByName("Data");
const colourData = {"background": dataSheet.getRange(1,2).getValue()};
return colourData;
}
function include(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
page.html:
<!DOCTYPE html>
<html>
<head>
<?!= include("page-css"); ?>
</head>
<body>
<div class="container">
</div>
<?!= include("page-js"); ?>
</body>
</html>
page-css.html:
<style>
:root{
--background: black;
--text: white;
}
.container {
height: 200px;
width: 100%;
background-color: var(--background);
color:var(--text);
}
</style>
page-js.html:
<script>
var r = document.querySelector(":root");
google.script.run.withSuccessHandler(setColours).getColours();
function setColours(colourData){
r.style.setProperty("--background", colourData.background);
}
</script>
I would appreciate any suggestions for improving this process.