DEV Community

Cover image for Dark Mode using CSS variables
Tapajyoti Bose
Tapajyoti Bose

Posted on • Edited on

Dark Mode using CSS variables

#css #webdev #ux #darkmode

What is Dark Mode?

Dark mode, also called Light-on-dark color scheme, is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background and is often discussed in terms of computer user interface design and web design.

The idea behind dark mode is that it reduces the light emitted by device screens while maintaining the minimum color contrast ratios required for readability.

What are the advantages of Dark Mode?

  • Can use less energy on the using device
  • Can potentially reduce eye strain and dry eyes in low-light conditions
  • Less blue light emitted from your phone – which can keep you awake if you use your device before heading to bed

How to implement dark mode in your website?

Lets start with a html skeleton and a button and a linked stylesheet and script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dark Mode</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="btn" id="toggleBtn">
        Toggle Dark Mode
    </button>
    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now let's address the main issue. First we will be adding the css variables for the colors (lets call them primary and background) and override the required color(s) in the dark mode

:root{
    --primary: #4240b4;
    --background: #dddddd;
}

.dark{
    --background: #222222;
}

html,
body{
    background-color: var(--background);
}

.btn{
    background-color: var(--primary);
}
Enter fullscreen mode Exit fullscreen mode

So from the javascript, we only need to toggle the class list of the body of the html document

const body = document.querySelector("body")
const toggleBtn = document.querySelector("#toggleBtn")

toggleBtn.addEventListener("click", (e) => {
    body.classList.toggle("dark")
})
Enter fullscreen mode Exit fullscreen mode

Demo

Project using this Implementation

Smartsapp

Web-app: https://smartsapp-ba40f.firebaseapp.com

GitHub logo ruppysuppy / SmartsApp

💬📱 An End to End Encrypted Cross Platform messenger app.

Smartsapp

A fully cross-platform messenger app with End to End Encryption (E2EE).

Demo

NOTE: The features shown in the demo is not exhaustive. Only the core features are showcased in the demo.

Platforms Supported

  1. Desktop: Windows, Linux, MacOS
  2. Mobile: Android, iOS
  3. Website: Any device with a browser

Back-end Setup

The back-end of the app is handled by Firebase.

Basic Setup

  1. Go to firebase console and create a new project with the name Smartsapp
  2. Enable Google Analylitics

App Setup

  1. Create an App for the project from the overview page
  2. Copy and paste the configurations in the required location (given in the readme of the respective apps)

Auth Setup

  1. Go to the project Authentication section
  2. Select Sign-in method tab
  3. Enable Email/Password and Google sign in

Firestore Setup

  1. Go to the project Firestore section
  2. Create firestore provisions for the project (choose the server nearest to your location)
  3. Go to the Rules…


View on GitHub


Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Thanks for reading

Reach out to me on:

Top comments (0)

Read next

mshsayket profile image

How to Install Bootstrap 5 in Laravel 11 with Vite?

Saddam Hossain -

nobody-99 profile image

-? What is YARN ?-

nobody-99 -

magsimuhammadessa profile image

Understanding Neomorphic Design in Web Development: What It Is, How to Achieve It, and When to Use It

Muhammad Essa -

charan_sajjanapu profile image

Evolution of Web Tech and Browsers

Charan Sajjanapu -