Dark Mode is a dramatic new look that's easy on your eyes and helps you focus on your work. Dark Mode uses a dark color scheme that is adopted by the web pages when is activated. Many developers use a dark color in code editors but now it can be seen in almost every apps i.e from mobile, desktop, to even web apps. Dark mode has become a must-have feature in every application. For websites, there are many approaches to activate the dark mode. In this post, I will try to explain what I use for my websites. The approach is with CSS. I use this approach most of the time and it works well.CSS allows the definition of custom properties (variables), which are entities that can be defined in CSS with specific values and reused throughout the website. You can find detailed information on the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties" rel="noopener noreferrer" target="_blank">MDN</a> , however, we will quickly review here how to create a variable and how to use it. <pre class="ql-syntax" spellcheck="false">:root {
&nbsp; --background-primary: #fff;
&nbsp; --color-primary: #333;
}

html[data-theme='dark'] {
&nbsp; --background-primary: #030303;
&nbsp; --color-primary: #ccc;
}

html {
&nbsp; transition: color 300ms, background-color 300ms;
&nbsp; background: var(--background-primary);
&nbsp; color: var(--color-primary);
}

h1, h2, p {
&nbsp; color: var(--color-primary);
}
</pre>To name a variable we need to prepend -- to the variable name, and to use it, we make use of the function var(). Now let’s try to implement dark mode this way. Now we need to assign to each element we use on our site the colors we want for text and background, otherwise, it won’t work. But gives you full control over what’s happening, and you can create different variables for titles, buttons, callouts. Let's write an HTML that demonstrates the dark mode.<pre class="ql-syntax" spellcheck="false">&lt;html&gt;
&nbsp; &lt;body&gt;
&nbsp;&nbsp;&nbsp; &lt;h1&gt;Hello there,I am dark mode&lt;/h1&gt;
&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;br /&gt;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;button onclick="toggleTheme('dark');"&gt;🌑&lt;/button&gt;
&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp;&nbsp; &lt;button onclick="toggleTheme('light');"&gt;🌞&lt;/button&gt;
&nbsp; &lt;/body&gt;
&lt;/html&gt;
</pre> The below JavaScript code is for toggling between dark and light mode and even save it on local storage, so the next time the user enters the site it remembers the preference.<pre class="ql-syntax" spellcheck="false">// Captures the current theme from local storage and adjust the page to use the current theme.
const htmlEl = document.getElementsByTagName('html')[0];
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;

if (currentTheme) {
 htmlEl.dataset.theme = currentTheme;
}

// When the user changes the theme, we need to save the new value on local storage
const toggleTheme = (theme) =&gt; {
 htmlEl.dataset.theme = theme;
 localStorage.setItem('theme', theme);

</pre>Below is the demo:<a href="https://codepen.io/sujanchhetri/pen/NWbYdWy" rel="noopener noreferrer" target="_blank">Demo</a> Happy Coding ...

How to implement Dark Mode on Your Website

Related blogs

About us: