Let's Make Dark Mode

Apps Script to Create Dark Mode in Google Sheet

There’s no native dark mode for Google Sheets, so let’s make our own.

gif of cartoon character grabbing a computer

Here’s what we’ll build. A style selector that has four different styles triggered by either a new dropdown menu or by clicking a custom button icon.

screenshot of Google Sheets

And here's the video walkthrough if you'd like to follow along:

Apps Script

Let’s walk through the darkMode function. This is how we start each function - with the key word function followed by whatever we’ll name it.

Because the functions take no arguments (they just run without needing more info from us), we have open and closed parentheses with nothing inside them followed by an open curly brace.

All of our code for the function goes between curly braces:

function darkMode() {
    .setFontFamily("Google Sans")

To select all the cells, we use the built in methods from the SpreadsheetApp class: getActive() and getRange(). These select the active sheet as well as a given range.

The following four lines are simply dot notation extensions telling what styles to apply. You can write this as one line if you’d like, but it’s good practice to have line breaks for readability.

gif of man saying, that’s clever


For setBackground(#333333) and setFontColor("white"), we can give CSS notation colors in either hex format or by the color’s name.

For setFontFamily("Google Sans"), we give it the font family name within quotations. Being a Google product, you can use any of the Google Fonts as well as Google’s own Google Sans font as I found out making this project.


The setBorder() function let’s you enter in true or false values for the top, left, bottom, right, vertical, or horizontal borders in that order followed by the color and style.


To set the style, you have to invoke a built in Enum Attribute, BorderStyle, to change the style of the border.

Style Menu

To easily select any of the styles we’re making from the actual spreadsheet, we need a menu.

To add this, we use the trigger onOpen() to run as soon as the spreadsheet opens and then the built in methods from the getUi() to build our custom menu.

We create the menu with .createMenu() and then add each of our functions to the menu with addItem().

function onOpen(){

Icon Buttons

As a bonus, I added four icon images to the sheet.
You can see how I did this on the video walkthrough if you want to add a little extra functionality.

screenshot of icons in spreadsheet

Thank you so much!

It means a lot that you’ve read this, and I hope it’s informed and/or entertained you for a few moments today!

Would love to say hi. Here are the best places to find me:

✉️ LinkedIn
📺️ YouTube

Ways I can help:

  • View my spreadsheet and creative products on my Gumroad store.

  • Need a powerful automation tool for Google Sheets? Try Coefficient to automatically import data and sync with your business systems.

  • Hire an expert to help complete your next Google Sheets, Apps Script or Google Workplace project.


or to participate.