Prefers color scheme, dark or light!

Dark mode, it is in your operating system, why not just use it. Can be done in css.

When you landed on this page it is either dark or light. This depends on the settings on your computer.

The explanation

First up, let's check the syntax. The most robust example can be found here. You can also just checkout some more helpful tricks on css-tricks

@media (prefers-color-scheme: dark) {

}

@media (prefers-color-scheme: light) {

}

Get it set up

Ok, we also have some CSS custom properties. Let's setup some. We want a background color for the background and a text color for the text. And the same when the color scheme is dark, just inverse the colors.

A small example on how this is set up on this page.

:root {
    --body-bg: #faf9f8;
    --text-color: #11100f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: #11100f;
        --text-color: #faf9f8;
    }
}

body {
    background: var(--body-bg);
    color: var(--text-color);
}

Cool, what to do

Cool, now we changed the basic styles. We added dark mode on the website and are all the rage now! Yes, we are. But now we need to check the rest of the site. We have cards in a specific color. Breadcrumbs in a particular color. bg-light and bg-dark, they won't change on the basis on the body color. This is just a starting point for your dark mode, using bootstrap. The rest is a step by step test to get the best colors on your website.

Sass

the previous example just extends the main css, we can setup the code so we use bootstrap sass variables. An example.

:root {
  --body-bg: #fff;
  --body-color: #212529;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #111;
    --body-color: #ecf0f1;
  }
}

$body-bg: var(--body-bg);
$body-color: var(--body-color);

@import "~bootstrap/scss/bootstrap";

A note

This does not fix everything. Actually, this fixes very little. This just changes the body background and the text color of the body. The rest of the styles are the same as set up. This is just the start of your journey, not the end. Play, test and try what you can do and what you want to do. It can only get better.

Helpful tricks

In chrome you can toggle the mode somewhere far away. In the developer tools (f12) click the three dots (shiskebab) menu pm the right. Search for "more tools" and find rendering. Here you can find the toggle.