Customizable branding for your Google Sheets automations

Let's say you build Google Sheets automations for clients. You might be running an agency where you build dashboards, intake forms, and weekly reports for small business customers. Or you might be building internal tools for teams at your company, or even a productized Sheets template you sell. Every project needs branding applied across every UI surface the tool produces: the sidebar, dialogs, generated emails, any PDFs.

Doing this by hand is repetitive work. The same accent color shows up in the sidebar's CSS, every dialog's CSS, the email template, and the PDF renderer. Onboarding a new client means forking the project, finding each place the previous color appears, replacing them, and hoping nothing got missed. This takes time, but the work matters. Clients expect a tool that looks like theirs, and a polished finish signals professionalism.

The template that I'll share below demonstrates one approach for making branding configurable so you only need to update a single "Branding" tab in your spreadsheet. You define the mapping once: this row holds the accent color, this row holds the logo URL. Every UI surface in the project reads the tab on render. To onboard a new client, all you need to do is make a copy of your automation template, edit the colors and image URLs on this tab, and hide the tab

How this pattern works

This pattern has three core pieces:

1. A tab in the spreadsheet called Branding. It has three columns: KEY, VALUE, NOTE. Each row in this tab represents one branded thing, a logo URL, a brand color, an accent, and the NOTE column tells you what that row controls. You customize the tool by editing this tab. There is no need to open the script editor.

   

2. A small convention for how to configure colors and images. Rows whose KEY starts with LOGO_ store an image URL or a Google Drive file ID in the VALUE cell. Rows whose KEY starts with COLOR_ work differently, you do not type a hex code into the VALUE cell. You paint the cell background using the standard paint-bucket icon on the Sheets toolbar. The script reads the cell's background color, not its text. White means "no override, use the default." You can reset a color by clearing the fill.
3. A thin layer of code that reads the tab on every render and feeds the values into the web UI. A function called getBrand() opens the Branding tab, iterates through the rows, and returns an object with the resolved colors and logos. The web UI reads those values through CSS custom properties, so any cell you repaint shows up in the next sidebar render. The script never modifies the tab; the tab is always the source of truth.

Try it now

Make a copy of the starter kit linked below. When the sheet opens, click the Branding Demo menu at the top of the page, then Show Demo Sidebar. A sidebar opens on the right with a small UI driven by the pattern.

Now open the Branding tab. Find the row whose KEY is COLOR_ACCENT. Click into the VALUE cell, then change its fill color using the paint-bucket icon on the toolbar. Pick something obviously different from the default, a bright blue, a deep red, whatever makes the change easy to see.

Reopen the sidebar from the menu. The buttons, headings, and highlights are now in the color you painted. The page restyled itself based on a single cell of the spreadsheet. You did not open the script editor.

As you can see above, I updated the colors in the sheet and this automatically propagated to the sidebar UI.

Two ways to add this to your own project

If you'd like to try this pattern there are three ways for you to incorporate it in your project. Pick the path that works best for you.

1. Use AI to implement the pattern. Use Gemini, ChatGPT, Claude, or whichever assistant you modify the code to suit your needs. Please note that AI can make mistakes, and some AI tools may use your data for model training. So, please ensure your usage complies with your company's data policies.
2. Build it by hand. If you're a developer, you can use this idea as inspiration and roll out your own solution. You can use Brand.gs, Util.gs, Constants.gs, and Theme.html as a starting point and adapt these files to suit your needs.

A nicer setup: let the sheet's theme drive the colors

Google Sheets already has a built-in theme picker. You'll find it under Format > Theme. It defines a small palette, accent 1 through accent 6, background, text, and applies that palette across charts, banded ranges, and table styles in the spreadsheet.

You can wire your Branding tab to use that palette. Paint each COLOR_ cell with the matching native theme color. Then when you change the spreadsheet's theme via Format > Theme, every COLOR_ cell whose fill was the old theme color repaints itself, and getBrand() picks up the new values on the next render. Your automation re-skins itself when you change the sheet's theme.

1. Paint cells using Theme colors	2. Change the theme to change the colors

This is nice because it gives you two layers of customization for free. You can pick a sheet theme and get a coherent re-skin in one click, or you can paint individual COLOR_ cells with custom colors to override the theme for specific roles (e.g. the danger color stays the standard red regardless of what theme you pick).

When something doesn't update

If you're new to Apps Script, here are a few issues you might run into.

Conclusion

In this tutorial I showed you one approach for making branding configurable in your Apps Script automations. Create a Branding tab and make it the source of truth for every UI surface in your project. Use the starter kit linked above and adapt it to incorporate this pattern in your Apps Script projects.

Hope you found this helpful. Thanks for reading!