Use CSS to switch between dark mode and bright mode

In the fifth issue of Web Skills, a technical solution for implementing dark mode and highlight mode with CSS is specifically mentioned. That is, use the new media query condition prefers-color-scheme value dark and light to switch. This is the most basic and native solution. In addition, it can also be simulated through the CSS mixed mode attribute. Of course, in addition to the technical solutions mentioned in the journal, there are other solutions. Today we will learn how to switch between dark mode and highlight mode.

What are dark mode and light mode

Before talking about technical solutions, let’s first briefly understand what dark mode and highlight mode are? These two concepts come from the macOS system, which provides users with two theme skins, namely light and dark skins. Since this concept came into being, many websites have provided users with two sets of skin colors, making it easy for users to switch according to their habits or preferences.

Whether it is dark mode or highlight mode, it is a switch between black and white. This theme style is very friendly to users with color blindness.

Similar functions can be found in other systems or software, the difference lies in the modes provided. In some software, users may be provided with some skin customization functions. Of course, there are similar functions on websites, but in the past we may prefer to call this function website skinning .

In this way, we can talk about the switching between these two modes as changing the skin, which may be more suitable for our business scenarios. Next, let’s talk about the technical aspects, that is, how to use CSS to complete the theme switching of web pages or applications!

Simplest mode

Assuming that your theme is in highlight mode by default, we can use the simplest and most brutal way to switch highlight mode to dark mode. Suppose there is an entry on the web page, and when the user clicks this button , a dark-theme class name will be added to html element:

document.getElementById('buttonID').addEventListener('click', function(){
    document.documentElement.classList.add('dark-theme')
})

Add dark styles to .dark-theme and all its descendant elements:

.dark-theme {
    background-color: #000;
    color: white;
}

.dark-theme *:not(a) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #999 !important;
} 

Although this method is simple and crude, some details need additional processing, especially when the code also uses !important styles, it will be more troublesome. In addition, other elements involving color may require additional processing.

Prepare two sets of styles

In my personal impression, the earliest way to achieve similar effects was generally to use JavaScript to change the .css file of the web page or web application theme skin:

As shown in the figure above, two CSS files are provided, one is theme1.css and the other is theme2.css . At the same time, a user-switchable entrance is provided. When the user selects the corresponding theme, the web page or web application will switch to the corresponding .css , so that the corresponding theme skin color effect can be seen.

Assume that the default theme style of the web page is theme1.css :

<link type="text/css" rel="stylesheet" media="all" href="../theme1.css" id="theme_css" />

Provide a simple script function in the code:

document.getElementById('buttonID').addEventListener('click', function(){
    document.getElementById('theme_css').href = '../theme2.css';
})

Back to our theme, if you need to switch between dark mode and light mode, you can follow a similar principle and provide dark.css and light.css respectively.

Maintaining multiple sets of styles is a pain, especially when you want to provide more skins for your product. At this time, you can use a processor like Sass to maintain your theme style, declare variables, and then maintain the corresponding variable values. For example, the construction of the Bootstrap theme uses Sass variables:

The knowledge of managing multiple skins with Sass is beyond the scope of this article. If you are interested in this knowledge, you can read the following articles:

Organizing Multiple Theme Styles with Sass

Summarize

The above is what I introduced to you about using CSS to switch between dark mode and highlight mode. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time!