In this article, we'll create our own dark mode. One way to do that would be by selecting all the cells and manually changing their background color and font color. This will get the job done, but we can automate the process and add more style options to choose from.

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 with different background modes

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

How to Create Dark Mode in Apps Script

We’ll create four functions, one for each style mode. Each of our functions will do the following:

1. Set background color
2. Set font color
3. Set font family
4. Set border color and style

Let’s walk through how to create a darkMode function in Apps Script. We'll define each function with the function keyword, followed by whatever we’ll name it.

Because the functions take no arguments (they just run without needing more info from us). That is, 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 the darkMode function's 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 used the built-in methods from the SpreadsheetApp class: getActive() and getRange(). These select the active sheet as well as a given range.

In our case, we’ll plug in A1:Z as the range, but you can extend this further if you’d like. For instance, A1:AZ, would add columns AA:AZ and then apply our styling to them.

The four lines that follow are simply dot notation extensions telling what styles to apply. You can write this on one line if you’d like, but it’s good practice to have line breaks to make the code easy to read.

gif of man saying, that’s clever

How to Set Colors and Fonts

You'd notice that we used both setBackground(#333333) and setFontColor("white") in the code. This is because we can use CSS notation colors in either hex format or by using the color’s name.

Using setFontFamily("Google Sans"), we gave 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.

How to set the Border

The setBorder(false,false,false,false,true, true,"#444444",SpreadsheetApp.BorderStyle.SOLID) function let’s you enter 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, we had to invoke a built in Enum Attribute — BorderStyle — to change the style of the border.

How to Create the Style Menu

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

To add the menu, we'll create a new function called onOpen() that runs as soon as the spreadsheet opens and then the built-in methods from the getUi() to build our custom menu.

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

Here's the code:

function onOpen(){
  SpreadsheetApp.getUi()
    .createMenu('Style')
    .addItem("Dark","darkMode")
    .addItem("Papyrus","papyrusMode")
    .addItem("Light","lightMode")
    .addItem("Synth","synthMode")
    .addToUi();
}

Google Apps Script automatically integrates with Google Workspace apps (like Google Sheets) so the functions we've added in the code will make the functionalities accessible in your Google Sheets.

How to Add Icon Buttons

As a bonus, I added four icon images to the sheet, and by selecting Assign script we can have these icons act as buttons to trigger any of the four styles we’ve built:

screenshot of icons in spreadsheet

When you type the function name into the Assign script dialog box, make sure you do not to use parentheses. You should only enter the name of the function itself:

screenshot of assigning script to image

And bingo! We’ve got ourselves a style picker. You can add or edit these to create any number of combinations that you can easily toggle on and off in your own Google Sheet!

screenshot of Synth Mode Style

Conclusion

This article shows how you can create can code dark, and other background modes for your Google Sheets using Apps Script and JavaScript.

I hope this has been useful for you!

More Resources😄

▶ Find all my video tutorials and walkthroughs on YouTube: https://www.youtube.com/@eamonncottrell?sub_confirmation=1

▶ Connect with me on LinkedIn where I share daily tips: https://www.linkedin.com/in/eamonncottrell/

In this article, I will show you how to turn on the dark theme on your Google Chrome app, on both Windows machines and Android phones. We'll also learn how to turn on dark theme for Google with some Chrome extensions.

It doesn’t end there – you will also be able to run your Windows apps in dark mode after reading this article.

How to Turn on Dark Mode for Google on Windows 10

Step 1: To turn on dark theme for Google on your Windows 10 PC, click on Start, or press the WIN (Windows) key.

Step 2: Click on Settings

Step 3: Click on Personalization

Step 4: Select Colors from the menu tab

Step 5: And finally, under “Choose your default app mode”, choose dark.

The settings app itself will change to dark mode, meaning all the apps on your machine are now running on dark mode.

To confirm that Google is now running on dark mode, open up the Chrome app and search anything on Google:

Other parts of Chrome will run on dark theme, too:

How to Turn on Dark Mode for Google With a Chrome Extension

To turn on dark theme for Google with a Chrome extension, download and activate the Just Black chrome extension from the Chrome Web Store.

The extension was built by the Chrome team, so it's safe to install and use.

How to Turn on Dark Mode for Google on Android Phones

Step 1: To turn on dark mode for Google on an Android phone, open your chrome app and click on the three dots in the top right corner.

Step 2: Tap settings

Step 3: Select theme

Step 4: Finally, choose dark

Your Chrome mobile app should be in dark mode, including the Google search page:

Conclusion

In this article, you learned how to turn on dark mode for Google on Windows machines and Android phones.

You also learned how to do the same with a chrome extension.

There are several other extensions that give you dark mode on Chrome, so feel free to check them out on the Chrome Web Store.

Thank you for reading, and have a nice time.

Fortunately, Gmail has a built-in dark mode theme. This will make it much easier to read at night.

In addition to reducing eye strain, dark mode can even reduce the battery consumption of your device, allowing you to use it for longer without charging it. (It's a small improvement, but it helps.)

So how do you turn on dark mode in Gmail? I'll show you how to switch to Gmail's dark theme in just a few steps.

Gmail Dark Mode on Desktop

First, open your browser and go to Gmail. Sign in if necessary.

Click on the gear icon in the top right and next to "Theme" click "View all":

In the "Pick your theme" menu, scroll down until you see the different color options.

Select "Dark" (this text will be visible when you hover over the black thumbnail), and click "Save":

And when you go back to your inbox, it'll be in dark mode:

Gmail Dark Mode on Android

Note: This method requires Android 10 and up.

First, open the Gmail app. Download the app and / or sign in if necessary.

In Gmail, open the side menu by tapping the three vertical bars on the top left of the screen, or by swiping from the left:

In the side menu, scroll down to the bottom and tap "Settings":

Then in the Settings menu, tap "General settings":

In the General settings menu, tap "Theme":

Finally in the Theme pop up menu, select "Dark":

And Gmail will switch to dark mode:

Gmail Dark Mode on iOS

Note: This method requires iOS 13 and up.

If you have an iPhone and want your Gmail to be in dark mode, it's super simple to make that happen.

There isn't a setting in the Gmail app itself – you simply set your phone's settings to dark mode (and Gmail will follow suit). Here's how to do that.

First, go to your phone's "Settings" and scroll until you see "Display & Brightness" partway down:

Click on Display and Brightness, and you'll be taken to this screen:

As you can see, my phone is currently set to Light Mode (it's selected). If I want to switch to dark mode, just toggle that option on, like this:

Now my phone is set to dark mode (all the time, rather than just auto-adjusting when it gets dark outside).

So my Gmail app will now look like this:

There you have it! If you only want your Gmail app to use dark mode at night, you can update your settings accordingly.

Just make sure your phone is on Light mode and the "Automatic" option is toggled on. Then just select the "Sunset to Sunrise" option under "Options" and your phone will automatically adjust your apps into dark mode when the sun goes down!

It'll look like this:

Thanks for Reading

If you found this helpful, please share it with your friends so more people can enable Gmail's dark mode on desktop, Android, and iOS devices.

Also, if you liked this article, let me know over on Twitter.

With the new iOS 13 update, Apple Mail is getting a dark theme. That means it's the first major email client that supports the prefers-color-scheme CSS media query. So you can now design emails specifically for both dark and light themes.

I’m a massive dark mode fan, and blindingly-bright email is my nemesis. So when I learned about dark mode in iOS 13, I did the only obvious thing and ordered a brand new iPhone to test things out.

While I was at it, I also tested how dark mode works in almost all email clients, including the troublemaker Outlook. Here’s what I found.

But first, what is prefers-color-scheme?**
The prefers-color-scheme CSS media query is used to detect whether the user prefers a light or dark theme, making it possible to design email specifically for both.

With the iOS 13 update, the support in most popular email clients jumped from 2.3% to 38.4%! A huge step thanks to Apple Mail's popularity. Surprisingly, Outlook was the only email client that supported this before Apple Mail.

How dark mode works in popular email clients

To render the email message dark itself, email clients invert the email’s colors automatically behind the scenes. For regular user-to-user emails, this works well and consistently in all email clients.

However, it’s not that simple for custom HTML emails — those that fill most of our inboxes. I’m talking transactional and promotional.

Here’re the differences I found in how email clients handle dark mode email rendering:

* Popularity is shared across all platforms for the same email client because it cannot be reliably distinguished. Popularity source: Litmus, the 2019 email client market share.

(Visit the original post to view my notes from the testing, and to see the latest tests as I gradually test more email clients and update the article there first.)

How to make HTML emails dark mode friendly

I already put the data to use, and a few Outlook related challenges later, I made our emails dark mode friendly. Here’s how you can do the same:

What the data say:
More than 55% of emails might be opened with dark mode enabled. Once Gmail joins the dark side, emails that might be opened with dark mode enabled will skyrocket to 83%!

1) Adjusting colors

Look out for Apple Mail, as it inverts colors only if the background color is transparent or unspecified — white background won’t do. The easiest way to make sure your emails won’t blind anybody is to check whether a background color is specified. For more control over the design, this is where prefers-color-scheme comes in handy.

Syntax (@media prefers-color-scheme):

<style>
    /* Your light mode (default) styles: */
    body {
        background: white;
        color: #393939;
    }

    @media (prefers-color-scheme: dark) {
        /* Your dark mode styles: */

        body {
            background: black;
            color: #ccc;
        }
    }
</style>

A design tip: Avoid pure white #fff as the text color. I found that contrast ratio around 11.5 for the main text is a nice compromise between not too bright and not too dim. Check the contrast ratio here: https://contrast-ratio.com or use Chrome dev tools.

2) Switching between light and dark logo

A dark text on a dark background is pretty much invisible, and that’s precisely what happens to a logo if viewed in an email client with enabled dark mode.

Nowadays, a typical logo usually has a transparent background, colorful icon, and dark copy. See the problem? Because email clients don’t invert image colors, you need to handle it yourself.

To tackle this, you can either:

1. save the logo with a white background instead of a transparent background (the easiest way to fix this). But I wouldn’t recommend this approach — dark mode users won’t be happy.
2. put a light logo on a dark background, and keep the rest of the email on a white background (see how Litmus does it).
3. make dark mode email your default. A good candidate for this would be Spotify as they only offer a dark theme in their apps.
4. include both light and dark versions of your logo and switch between with prefers-color-scheme media query

My favorite is the last approach, so here’s how you do it:

A simple "display: none" on the dark logo works just fine in all modern email clients. But to everyone's surprise, it doesn't work in Outlook and Windows 10 Mail.

In CSS styles:

<style>
    @media (prefers-color-scheme: dark) {
        .darkLogo {
            display: none !important;
        }

        .lightLogoWrapper,
        .lightLogo {
            display: block !important;
        }
    }
</style>

…and the HTML structure:

<image src="dark-logo.png" class="darkLogo" />

<!--
    To hide the light logo perfectly in Outlook and Windows 10 Mail, 
    you need to wrap the light logo image tag with a div.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
    <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

This approach works pretty well, but it still won’t work correctly across the board. The dark text on dark background issue will happen with email clients that do support dark mode but don't support prefers-color-scheme. That is Outlook, Windows 10 Mail, Zoho, and potentially Gmail.

So, to make the logo in email fully bulletproof, I’ll combine methods 1 and 4 from above. Method 1 will cover all email clients that support dark mode, but not the prefers-color-scheme. And method 4 will cover Apple Mail, Outlook on MacOS, and Outlook.com, which does support both.

Also, instead of saving the logo on a white background, I’ll add a 3-pixel wide background-matching border and save it on a transparent background as usual.

It’s starting look pretty complex (just for a logo), so let’s see the HTML markup first:

<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- Light theme (so dark logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
    <image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>

<!-- Dark theme (so light logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
    <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

…and CSS styles:

<style>
    @media (prefers-color-scheme: light) {
        .darkLogoDefault,
        .lightLogo {
            display: none !important;
        }

        .darkLogoWrapper,
        .darkLogo {
            display: block !important;
        }
    }

    @media (prefers-color-scheme: dark) {
        .darkLogoDefault,
        .darkLogo {
            display: none !important;
        }

        .lightLogoWrapper,
        .lightLogo {
            display: block !important;
        }
    }
</style>

Dark mode in Gmail is coming

Dark mode is coming to Android in the new Android 10, and Gmail should go completely dark too, finally. All you need is Android 10 and the newest Gmail (at least version 2019.09.01.268168002). However, Google tends to enable new features (a dark theme in this case) for users gradually with a server-side push, and I haven’t had luck with it for now.

I’m curious to see if support for @media prefers-color-scheme is coming to Gmail. From what I read, it doesn’t seem promising. I guess we have to wait to find out. I’ll update the article once I get the dark theme in Gmail enabled.

Wrapping up

Dark mode is coming to HTML email, and I love it! But, it’s another thing to worry about – like using HTML tables for layout wasn’t enough.

Stay up-to-date about the dark mode in email by joining our mailing list. We also share there insights and challenges we face while building and growing our SaaS product — Sidemail.

Thanks for reading!

I designed this website almost 1 year ago, and did many changes along the way, just as we do with any website.

Eventually I grew tired of the design: title is too big, too much space lost instead of showing the content right away, and so on.

I sat down yesterday evening and started re-imagining the website, and I finished the redesign this morning:

Much better! Content, the most important thing, is more prominent.

I used a monospaced font (Inconsolata) because as a programming blog it’s a nice one, despite the reduced readability and increased page size due to the font use, because I want that font on my site. I like it better, and since my site is a big part of my day to day activity, I wanted it to be what I want.

I just missed one thing: dark mode. As I was in the process of redesigning, I had the dark mode option in mind.

How did I do it? First, I added the Moon Emoji ? in the sidebar, as a way to let people change the mode from light to dark.

Then, I added a JavaScript snippet that runs when it’s clicked. I just added it to the onclick event handler inline in the HTML, without going fancier:

<p>  <a href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')" title="Dark/light</p>

This is the JavaScript that runs in the onclick:

localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')

It’s a bit convoluted, but basically I check if the mode property in the local storage is ‘dark’ (and defaults to dark if it’s not set yet, using the || operator), and I set the opposite of that in the local storage.

Then I assign the dark class to the body HTML element, so we can use CSS to style the page in dark mode.

Another script runs as soon as the DOM loads, and checks if the mode is dark. If so, it adds the dark class to the body HTML element:

document.addEventListener('DOMContentLoaded', (event) => {  ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')})

Now if people change modes, their choice will be remembered next time they load the page.

Then I added a lot of CSS instructions to the CSS, all prefixed with body.dark. Like these:

body.dark {  background-color: rgb(30,34,39);  color: #fff;}body.dark code[class*=language-],body.dark table tbody>tr:nth-child(odd)>td,body.dark table tbody>tr:nth-child(odd)>th {  background: #282c34}

Now things should already be working! Here is my site in dark mode:

I added the dark class to the body element by default, to make dark mode the default:

<body class="dark"> ... &lt;/body>

Why? First, I liked it better. Then, I made a poll on Twitter and people liked it better.

But also for a technical reason, a very simple one actually. I don’t store the user choice server-side, so I have no way to know the mode until the local storage is available.

I could do that if the site was generated server-side, but it’s a static site, so I always serve the same page to everyone that requests it. Even if I got a cookie, I have no place to process it (on the flip side this means my pages load faster).

So when someone navigates to another page on my site, or loads the page for the first time on a second visit, I don’t want to show a bright page while I determine the mode. Maybe the visitor is coding in the middle of the night in a dark room.

I’d rather do that in light mode: show a dark page for a couple milliseconds and then turn it white again.

The Media Queries Level 5 specification, still in work in progress, contains a new [prefers-color-scheme](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) media feature. Safari Technology Preview on macOS already supports it and we can use it to tell if the user is browsing the page in dark or light mode:

@media (prefers-color-scheme: dark) {  body {    background-color: black;    color: white;  }}@media (prefers-color-scheme: light) {  body {    background-color: white;    color: black;  }}

Hopefully this is going to be stable in Safari soon, and in the future Chrome and Firefox will support it too.

Originally published at flaviocopes.com.