Let's Make Dark Mode

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

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.

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() {
  SpreadsheetApp.getActive().getRange('A1:Z')
    .setBackground("#333333")
    .setFontColor("white")
    .setFontFamily("Google Sans")
    .setBorder(false,false,false,false,true,
     true,"#444444",SpreadsheetApp.BorderStyle.SOLID)
}

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.

Colors

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.

Border

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.

setBorder(false,false,false,false,true,
true,"#444444",SpreadsheetApp.BorderStyle.SOLID)

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(){
  SpreadsheetApp.getUi()
    .createMenu('Style')
    .addItem("Dark","darkMode")
    .addItem("Papyrus","papyrusMode")
    .addItem("Light","lightMode")
    .addItem("Synth","synthMode")
    .addToUi();
}

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.