Getting Started

All we need is a web browser and a text editor. Go ahead and create the index.html file. If you’re using emmet, you can just type ! and hit tab. This will give you the index.html boilerplate code.

Every web application building block, the index.html

<dark-mode-toggle> Element

Thanks to open-source code, we already have a handy component built for our needs. It’s called dark-mode-toggle — we can either include the component via a CDN or install it as an NPM package.

The following component is a custom element that allows you to easily put a Dark Mode 🌒 toggle on your site, so you can initially adhere to your users’ preferences according to prefers-color-scheme , but also allow them to (optionally permanently) override their system setting for just your site.

The prefers-color-scheme media feature is used to detect whether the user has requested the page use a light or dark color theme. It has the following three values.

no-preference : Indicates that the user has made no preference known to the browser. This keyword value evaluates as false in the boolean context.

: Indicates that the user has made no preference known to the browser. This keyword value evaluates as in the boolean context. light : Indicates that the user has notified the browser that they prefer a page that has a light theme (dark text on light background).

: Indicates that the user has notified the browser that they prefer a page that has a light theme (dark text on light background). dark : Indicates that the user has notified the browser that they prefer a page that has a dark theme (light text on dark background).

Place the following code to the <head> section of the index.html :

The custom element assumes that you have organized your CSS in different files that you load conditionally based on the media attribute in the stylesheet's corresponding link element. The following stylesheets are named common.css , light.css , and dark.css — notice how each theme has its own encapsulated styles. Go ahead and create the three stylesheets.

touch common.css light.css dark.css

This is a great performance pattern, as you don't force people to download CSS that they don't need based on their current theme preference, yet non-matching stylesheets still get loaded but don't compete for bandwidth in the critical rendering path.

Next, add the <dark-mode-toggle> element to our index.html

Adding the dark-mode-toggle element

While we’re there, let’s add some content as well. After all, we want to see and test our results. Here’s how our index.html looks as of now:

Adding content to index.html

And finally, we need to declare styles for our light and dark theme. Grab the styles from the code snippets below.

common.css

These styles are reused between the dark and light theme.

common.css

Notice the color-scheme property. The color-scheme property is still in development and it might not be fully supported yet. Full support in Chrome will come at the end of 2019.

dark.css

These are the styles for our dark theme.

dark.css

light.css

And finally, styles for the light theme.

light.css

Open the index.html file in your browser. You can either open it locally or fire up a quick HTTP server. In my case, I’ll just open it with the built-in Python server.

$ python -m SimpleHTTPServer

Firing up our Python server

Now if we open our browser and type in localhost:8000 — we should see the following:

Go ahead and click on the theme switcher buttons on the top-right corner.

Toggling themes

Awesome! It works like a charm. You can find all the image assets from the GitHub repository here.

If you’re new to JavaScript and want to learn the language, I recommend starting with reading books combined with building things. Start with the “A Smarter Way to Learn JavaScript” book and here’s a list of fun apps to build.

Thanks for reading, I hope you learned a thing or two. Stay awesome!