Introduction
Dark Mode , also known as dark background mode, basically this mode will convert the light background (default) to the background with the dominant color is dark / black. This makes the display interface unchanged, but the color part changes drastically, besides, it also brings a lot of benefits including: benefits for human health (improving sleep, eyes, heart, facial skin ..), benefits with the device itself (improving performance, power consumption …)
In this article we will learn how to include darkmode for our website using CSS Variables .
Implement
We will add 3 options for users to choose including: Dark , Light and Auto . In addition to the already popular Light and Dark modes, here we have the Auto mode, the meaning of this mode is that it will be based on the theme settings of the system used to determine whether the current mode will be Light or Dark .
Adding the HTML
We will add the html snippet so that the user can choose between modes:
1 2 3 4 5 6 |
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span> select</span> <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> theme <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> auto <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Auto <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> option</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> light <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Light <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> option</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> option</span> <span class="token attr-name">value</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> dark <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> Dark <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> option</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> select</span> <span class="token punctuation">></span></span> |
Adding the CSS
We will add a bit more CSS to the body
tag, where we specify the color for the Light mode
1 2 3 4 5 |
<span class="token selector">body</span> <span class="token punctuation">{</span> <span class="token property">--background-color</span> <span class="token punctuation">:</span> #ffffff <span class="token punctuation">;</span> <span class="token property">--text-color</span> <span class="token punctuation">:</span> #000000 <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
To use CSS variables in the entire style sheet or where needed, we can add the following:
1 2 3 4 5 6 7 8 9 |
<span class="token selector">.main-content</span> <span class="token punctuation">{</span> <span class="token property">background</span> <span class="token punctuation">:</span> <span class="token function">var</span> <span class="token punctuation">(</span> --background-color <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">color</span> <span class="token punctuation">:</span> <span class="token function">var</span> <span class="token punctuation">(</span> --text-color <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">button</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> <span class="token function">var</span> <span class="token punctuation">(</span> --text-color <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Next we will implement Dark mode by replacing the corresponding values into the CSS variables just added above:
1 2 3 4 5 6 7 8 9 10 |
<span class="token selector">:root</span> <span class="token punctuation">{</span> <span class="token property">--dark-background-color</span> <span class="token punctuation">:</span> #111111 <span class="token punctuation">;</span> <span class="token property">--dark-text-color</span> <span class="token punctuation">:</span> #eeeeee <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">body.theme-dark</span> <span class="token punctuation">{</span> <span class="token property">--background-color</span> <span class="token punctuation">:</span> <span class="token function">var</span> <span class="token punctuation">(</span> --dark-background-color <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">--text-color</span> <span class="token punctuation">:</span> <span class="token function">var</span> <span class="token punctuation">(</span> dark-text-color <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
By this step basically 2 modes Dark and Light have worked. Now we will implement Auto mode:
1 2 3 4 5 6 7 |
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span> <span class="token property">prefers-color-scheme</span> <span class="token punctuation">:</span> dark <span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">body.theme-auto</span> <span class="token punctuation">{</span> <span class="token property">--background-color</span> <span class="token punctuation">:</span> <span class="token function">var</span> <span class="token punctuation">(</span> --dark-background-color <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token property">--text-color</span> <span class="token punctuation">:</span> <span class="token function">var</span> <span class="token punctuation">(</span> --dark-text-color <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
Here we use Media Query to detect whether the current system’s settings are suitable for Dark mode. If the condition is met, the css snippet inside @media
will be executed, details on prefers-color-scheme
, you can refer to here .
We can test this Auto mode by adjusting the theme of the OS to darkmode or view the website through the phone with darkmode mode enabled.
Adding the JavaScript
The implementation of CSS for the 3 modes has been completed, in the next step we will add a little javascript to the dropdown list to choose between operating modes.
1 2 3 4 5 6 7 8 9 10 11 |
<span class="token keyword">function</span> <span class="token function">applyTheme</span> <span class="token punctuation">(</span> <span class="token parameter">theme</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> <span class="token function">remove</span> <span class="token punctuation">(</span> <span class="token string">"theme-auto"</span> <span class="token punctuation">,</span> <span class="token string">"theme-light"</span> <span class="token punctuation">,</span> <span class="token string">"theme-dark"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> classList <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token template-string"><span class="token template-punctuation string">`</span> <span class="token string">theme-</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> theme <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token template-punctuation string">`</span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> document <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"DOMContentLoaded"</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">"#theme"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"change"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">applyTheme</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Here we handle the capture of the #theme
change
event to insert the corresponding class into the body
tag
A step further – remembering the theme
In order to function more effectively, we will handle the browser will remember the mode previously set for refreshes, page transitions. To do this, we can use Local Storage .
First we need to save the selected theme value:
1 2 |
localStorage <span class="token punctuation">.</span> <span class="token function">setItem</span> <span class="token punctuation">(</span> <span class="token string">"theme"</span> <span class="token punctuation">,</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> value <span class="token punctuation">)</span> |
From subsequent calls, we will check this theme
value to select the appropriate mode:
1 2 |
savedTheme <span class="token operator">=</span> localStorage <span class="token punctuation">.</span> <span class="token function">getItem</span> <span class="token punctuation">(</span> <span class="token string">"theme"</span> <span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">"auto"</span> <span class="token punctuation">;</span> |
We will loop through each of the #theme
options to check if the value savedTheme
the savedTheme
above or not, if so, we will set that value to be selected
:
1 2 3 4 |
<span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">const</span> optionElement <span class="token keyword">of</span> document <span class="token punctuation">.</span> <span class="token function">querySelectorAll</span> <span class="token punctuation">(</span> <span class="token string">"#theme option"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> optionElement <span class="token punctuation">.</span> selected <span class="token operator">=</span> savedTheme <span class="token operator">===</span> optionElement <span class="token punctuation">.</span> value <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Refactor the DOMContentLoaded
logic, so we get the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
document <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"DOMContentLoaded"</span> <span class="token punctuation">,</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> savedTheme <span class="token operator">=</span> localStorage <span class="token punctuation">.</span> <span class="token function">getItem</span> <span class="token punctuation">(</span> <span class="token string">"theme"</span> <span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">"auto"</span> <span class="token punctuation">;</span> <span class="token function">applyTheme</span> <span class="token punctuation">(</span> savedTheme <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span> <span class="token keyword">const</span> optionElement <span class="token keyword">of</span> document <span class="token punctuation">.</span> <span class="token function">querySelectorAll</span> <span class="token punctuation">(</span> <span class="token string">"#theme option"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> optionElement <span class="token punctuation">.</span> selected <span class="token operator">=</span> savedTheme <span class="token operator">===</span> optionElement <span class="token punctuation">.</span> value <span class="token punctuation">;</span> <span class="token punctuation">}</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">"#theme"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">addEventListener</span> <span class="token punctuation">(</span> <span class="token string">"change"</span> <span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> localStorage <span class="token punctuation">.</span> <span class="token function">setItem</span> <span class="token punctuation">(</span> <span class="token string">"theme"</span> <span class="token punctuation">,</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">applyTheme</span> <span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> value <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
And the result:
Summary
This article aims to introduce and learn about how to implement DarkMode for the website, the article is missing, thank you for taking the time to track.
Source and reference: https://dev.to/dcodeyt/add-dark-mode-to-your-websites-with-css-5bh4