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
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
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";
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";
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)
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>
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"
Now we have a scss-build command that we can run to take our scss file and output css.
npm run scss-build
Open the mypage.html file in your browser to see the output
Dark Mode Off
Now let's switch to Dark Mode in our OS settings)
Dark Mode On
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)
Hey man great tutorial! Very informative, learned a lot. Question, does this implementation of dark theme only work for OS users?
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!