dark mode in CSS and JavaScript

How to create and toggle dark mode in CSS and JavaScript?

Is it possible to toggle a dark mode in CSS and JavaScript? Yes here are some tricks that enable you to toggle dark and light modes on your website.

What is the dark mode?

The dark mode is a colour theme that changes the background colour of the operating system’s windows and the background colour of apps, to dark grey or black.

In the browsers, for example, dark mode transforms the background colour of the browser tabs, address bar, toolbar, and drop-down menu to dark grey.

It is also implemented in web apps and works the same as the above-mentioned areas. we will focus the dark mode on web development.

What are the advantages of a dark mode?

There are numerous benefits to adopting dark modes, such as increased battery life and less glare and blue light exposure.

  • Using dark mode can help you get more out of your battery.
  • dark mode can help limit blue light exposure, which is beneficial to your eyes.
  • Using dark mode greatly reduces glare on your screen for more pleasant reading.

Create the simplest custom dark mode

Create a simple dark mode using CSS and JavaScript. simply toggle the .dark-mode class.

body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: white;
}
<h2>Toggle Dark/Light Mode</h2>

<button onclick="darkMode()">Toggle dark mode</button>
function darkMode() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}

The prefers-color-scheme media query

The prefers-color-scheme media query determines whether the user has requested a light or dark colour theme for the website. It is compatible with the following values:

light: The user has informed the system that they prefer a page with a light theme (dark text on light background).
dark: Indicates that the user has informed the system that they prefer a dark-themed page (light text on dark background).

@media (prefers-color-scheme: dark){
  /* user prefers dark mode */
}

@media (prefers-color-scheme: light){
  /* user prefers light mode, or has no preference */
}

On the basis of user preferences, you can write CSS code for dark and light modes.

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

How to know whether the browser is supporting the dark mode or not? it is possible using JavaScript. With the following code, you can check the browser compatibility.

if (window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
  console.log('🎉 Dark mode is supported');
}

Now apply or remove the dark mode class to the element on the basis of conditions.

const a = window.matchMedia("(prefers-color-scheme: dark)");
console.log(a.matches); // true or false

if (a.matches) {
   // add dark mode class
    console.log('dark mode');
} else {
   // remove dark mode class
    console.log("light mode");
}

Create dark mode using the JavaScript library

Here is a library to achieve this easily in a few lines of code.

<main>
  <h1>Toggle the dark mode</h1>
  <button>Toggle Now - </button>
</main>

<script src="https://unpkg.com/@oddbird/[email protected]/dist/css-toggles.min.js" type="module"></script>

Now write some CSS code. for example, html:toggle(lightswitch) { } will toggle the light and dark modes.

html {
  margin: 0;
  height: 100vh;
  background: black;
  display: grid;
  place-content: center;
  color: white;
  transition: background 1s;
  toggle-root: lightswitch;
}

h1 {
  font-size: 5rem;
}

button {
  font-size: 2rem;
  padding: 0.5em;
  toggle-trigger: lightswitch;

  &::after {
    content: " light";
  }
}

html:toggle(lightswitch) {
  background: white;

  & button::after {
    content: " dark";
  }

  & h1 {
    color: black;
  }
}

Dark Mode in Tailwind CSS

To make this as easy as possible, Tailwind includes dark: variant that lets you style your site differently when dark mode is enabled:

class="bg-white dark:bg-slate-900"
Dark mode in tailwindcss

Read more: How to centre a div in CSS, Bootstrap and TailwindCSS?

Chrome extension for dark mode

If you are not a developer and just want to add dark mode on different sites then you can use the Chrome extensions to achieve the result.

Get the extensions: Dark Mode, Or Dark Night Mode here.

AdBlocker Message

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.