Have you ever been in a situation where you needed to make a dark theme for your new app, but there was no designer to help? You are on a deadline, and seemingly, there is no hope to finish the project in time. If you find yourself in this situation now, you are in the right place to find the way out of it. From this article, you will know how to create a dark theme for your app without a designer’s help. Without further ado, let’s dive into the process. Adding the themes is a quite easy process that is done in 3 steps: Add a Dark Theme Step 1 - choose the colors: :root {
  --primary-color: #2e3a59;
} Step 2 - add a use case: html {
  color: var(--primary-color);
} Step 3 - add a new theme: :root.other-theme {
  --primary-color: #8f9bb3;
} If you cannot use , you will have to write a few cycles on SASS. You can’t call this task a piece of cake, but we’ll manage to complete it. CSS Custom Properties But there’s a catch - you can have a few themes only if a designer made it for you first. Although you don’t always have one by hand, you want to add a dark theme to a default one. Accessibility matters. Once, I participated in a project where a designer worked only at an early stage. All the designers were busy, so we couldn’t count on them after they finished their part. But at the end of the project came an idea to make it better by adding a dark theme. Creating the first version, we didn’t want to add complex logic and additional controls. Therefore, we decided not to allow a user to change the theme. We had to act in line with system settings because it was the only way to keep the first option simple. Define the rules for the Dark Theme Now we need to know when to display the dark theme. There is a special CSS media inquiry for that purpose: . prefers-color-scheme Support is practically the same as in CSS Custom Properties ( ). https://caniuse.com/prefers-color-scheme @media (prefers-color-scheme: dark) {
} What about the colors? Alright, we have established how to define what theme to display. But what to do if there are no colors for the dark theme? And there is the answer to that question too. We can apply color inverse filters to the whole page. Again, support will be similar to CSS Custom Properties ( ). https://caniuse.com/css-filters @media (prefers-color-scheme: dark) {
  :root {
    filter: invert(100%);
  }
} Now let’s add a text on the page. Looks sharp, huh? Then we add a list, a citation, and a random text item - they look just as good as the previous one. Even so, the moment we add a picture, it turns negative. At this stage, we invert the whole page. It means that the elements will change their color to the opposite. The inversion works well with the text, but I don’t want my photos to turn negative. To avoid that, you need to add an exception. all @media (prefers-color-scheme: dark) {
  :root,
  :root img {
    filter: invert(100%);
  }
} But in this case, it would rather be a reinversion than an exception. Now, we’ve applied “reinversion” for images only. If you have a video or iFrame, or other content that is not to be reversed, you should apply the same rule to them too. Excellent! But you will ask me: “why do we need to apply a filter to and reverse visual elements to their initial state?”. Why can’t we just write the following CSS code: :root *:not(img) {
  filter: invert(100%);
} Selector will allow us to apply the filter to all the elements except images. Although, you should consider that the filter has some peculiarities. Let’s look at them in the case of the page layout below: <div>
  <p>
    Text in p
    <span>and in span.</span>
  </p>
  With picture of me:
  <img src="./pic.jpg" />
</div> So as matches our selector, the filter will apply to it. As a result, everything will be negative. div Since is inside the , it matches the selector and will change too. Thus, we will have it reinverted so that the colors get back to normal. p div The also matches the selector. Whereas the has become normal, the contents of the went negative. span p span Finally, the selector is not influenced by the filter, so no inversion happens. However, as the is a part of the element that we have inverted, the image will be negative. img img That is how it will look like on your screen: That’s why we apply the filter to the element once. Then, we invert the elements that we want to stay the same, again to bring them to the initial state. root Done! The first version works just fine, and the client is happy. In the second stage of the process, we add a switch for our themes. To do this, we’ll add to the header of our app, allowing users to choose the theme they prefer. The select will include 3 choices: , , and . select light dark auto Therefore, the will be a default value that will allow the app to inherit system settings. At the same time, when choosing or , we are adding a or class correspondingly to the element of a document. Then, we delete a theme class if using . To top it off, we save these settings in , which allows us to show the previous theme. auto light dark theme-light theme-dark root auto localStorage After we’ve added a few classes, we will modify CSS: @media screen and (prefers-color-scheme: dark) {
  :root:not(.theme-light):not(.theme-dark),
  :root:not(.theme-light):not(.theme-dark) img {
    filter: invert(100%);
  }
}

:root.theme-dark,
:root.theme-dark img {
  filter: invert(100%);
} Wrap up That’s it! You are ready to add the dark theme to your app without a designer’s help. But before you go and nail it, take a glance at the resume of the article to memorize the main points better. We have the following process logic: If the light theme is chosen - do nothing; If the dark one - always invert; If neither a dark nor light theme is chosen - invert depending on the system's settings. “Generating” a dark theme by applying a filter is quite easy and quick. Although, there can be some nuances regarding the page contents that are not to be inverted. In the majority of cases, you solve that problem by simple reinversion of such objects. But it doesn’t always work, so we need to use some hacks. However, there are some drawbacks of this method: Not all of the colors invert “aesthetically”, which can tarnish the UI a little bit; You cannot change the hues of light and dark to create different visual experiences of the interface; And the last but not least thing to remember is that all of the colors get inverted. Thereby, your “brand colors” will change too, which can harm your corporate identity. Regardless of all the drawbacks, it is still a credible and fast way to add a dark theme to your app. Besides, it can be helpful when you want to experiment with different themes, make PoC (Proof of concept), and see if it suits your application.

Different

Keep

Blog, rss, contacts are here

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Add a Dark Theme to a Web App Without Begging a Designer for Help

Too Long; Didn't Read

Companies Mentioned

Sasha Verbilo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Add a Dark Theme to a Web App Without Begging a Designer for Help

Too Long; Didn't Read

Companies Mentioned

Sasha Verbilo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES