DEV Community

Cover image for How to Implement Dark Mode in CSS - Full Tutorial
Joel Varty
Joel Varty

Posted on

How to Implement Dark Mode in CSS - Full Tutorial

Yesterday I wrote about how to use a media query in css to detect dark mode. Today I'll expand on that a little more to show how you can use that media query to completely change how your website looks and feels.

We'll be using bulma as a framework with npm to get this working. We are borrowing instructions from bulma's guide here to get started.

Let's start with a new directory.


mkdir darkmode
cd darkmode

Enter fullscreen mode Exit fullscreen mode

We'll need to add only a couple dependencies to get this working.

npm init
npm install node-sass --save-dev
npm install bulma --save-dev
Enter fullscreen mode Exit fullscreen mode

Create a scss folder in which you add 2 files, the first is called lightstyles.scss:

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
Enter fullscreen mode Exit fullscreen mode

Now we need our DARK styles. Let's call that file darkstyles.scss:


@charset "utf-8";


// Set your brand colors
$purple: #8A4D76; 
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple; 
$link: $beige-light;

// Update some of Bulma's component variables
$body-background-color: black;
$body-color: $beige-lighter;

// Import Bulma
@import "../node_modules/bulma/bulma.sass";
Enter fullscreen mode Exit fullscreen mode

Now we have our two different "themes" that we will be able to pull from. Let's create a css file that will decide which theme to use based on whether dark mode is enabled or not.

Create a css* folder and add a file called **mystyles.css.
Notice the prefers-color-scheme argument that we've added to the css @import command. This tells the browser to only use that css file in dark or light mode.

@charset "utf-8";
@import "./darkstyles.css" (prefers-color-scheme: dark);
@import "./lightstyles.css" (prefers-color-scheme: light)
Enter fullscreen mode Exit fullscreen mode

Create an HTML template which uses several Bulma components, and pulls in the mystyles.css file.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bulma with Darkmode</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet"
          href="css/mystyles.css">
</head>

<body>
    <section class="section">
        <div class="container is-fluid">
            <h1 class="title">
                Bulma
            </h1>

            <p class="subtitle">
                Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
            </p>

            <div class="field">
                <div class="control">
                    <input class="input"
                           type="text"
                           placeholder="Input">
                </div>
            </div>

            <div class="field">
                <p class="control">
                    <span class="select">
                        <select>
                            <option>Select dropdown</option>
                        </select>
                    </span>
                </p>
            </div>

            <div class="buttons">
                <a class="button is-primary">Primary</a>
                <a class="button is-link">Link</a>
            </div>
        </div>
    </section>
</body>

</html>

Enter fullscreen mode Exit fullscreen mode

Save this file as mypage.html.

Now we need to generate our dark and light mode css file from our scss. To do that, we need to add some logic to our package.json file.

Add this to the scripts property in your package.json file:

"scss-watch": "node-sass --watch scss -o css",
"scss-build": "node-sass scss -o css"
Enter fullscreen mode Exit fullscreen mode

Now we have a scss-build command that we can run to take our scss file and output css.

npm run scss-build
Enter fullscreen mode Exit fullscreen mode

Open the mypage.html file in your browser to see the output

Dark Mode Off

Alt Text

Now let's switch to Dark Mode in our OS settings)
Alt Text

Dark Mode On

Alt Text


I hope you can easily see how you can implement Dark Mode for your website or app.

I wrote this tutorial in my spare time. If you want to see what I do for my day job, sign up for Agility CMS - the fastest CMS!

Top comments (2)

Collapse
 
herrerake profile image
Kevin Herrera

Hey man great tutorial! Very informative, learned a lot. Question, does this implementation of dark theme only work for OS users?

Collapse
 
joelvarty profile image
Joel Varty

I believe the "prefers-color-scheme" css directive is cross platform. Should work in Windows 10, MacOS, iOS, Android, etc.

Let me know if it doesn't!