How to Implement Dark Mode in CSS - Full Tutorial
Tags: css, tutorial
Published: 2019-09-11 13:59:27

Yesterday [I wrote about how to use a media query](https://dev.to/joelvarty/how-to-implement-dark-mode-in-css-with-media-3d02) 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](https://bulma.io) as a framework with [npm](https://www.npmjs.com) to get this working.  We are borrowing instructions from [bulma's guide here](https://bulma.io/documentation/customize/with-node-sass/) to get started.


Let's start with a new directory.

```shell

mkdir darkmode
cd darkmode

```

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

```shell
npm init
npm install node-sass --save-dev
npm install bulma --save-dev
```


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

```css
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
```

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

```css

@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";
```

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.

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


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


```html
<!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>

```


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:

```json
"scss-watch": "node-sass --watch scss -o css",
"scss-build": "node-sass scss -o css"
```

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

```shell
npm run scss-build
```

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

### Dark Mode Off

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/wfiv8nvi236mjm3o9vgf.png)

*Now let's switch to Dark Mode in our OS settings)*
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jnrc5ov9hhxdfyuacqex.png)


### Dark Mode On

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/y1ccdqn1333bnrysnnix.png)


***

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](https://agilitycms.com) - the fastest CMS!