How To Add Dark Mode To Blogger (Blogspot)

Now that many devices are coming with dark mode, from Android 9 Pie and above to IOS devices, and many applications having night mode automatically activated or enabled with a button, smartphones are now getting cooler by the day.

Dark mode also offers some benefits to users, especially in the area of eye health. Most cases of sleeplessness and insomnia result from over exposure to smartphone screens. This also has another strain on the eyes.

But technology has come up with an idea to solve this problem, and this it did with the introduction of dark mode to smartphones.

Dark mode is what makes your smartphone screen to become dark, as the name implies, instead of the traditional white colour. While mostly this feature is for smartphone colours and now application, it seems Websites are left out. The over 3 billion searches on Google land on Websites which mostly contain the information users are searching for. But no matter that your device or browser has dark mode activated, you will still view websites and web pages in white colour.

But however, web developers can activate dark mode on their websites with just simple lines of code. Also website owners who wish to have dark mode on their company or business websites can talk to their web designers to activate it.

However, in this article, we will cover only how to add dark mode to blogger websites. Blogger websites are Websites that end in .blogspot.com extension like stanozdesigns.blogspot.com.

To add Dark Mode To Blogger, first navigate to your blogger code in Edit HTML, search and locate <b:skin><![CDATA] and paste the below CSS

:root {
--primary-color: #302AE6;
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
}[data-theme="dark"] {
--primary-color: #9A97F3;
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #161625;
--heading-color: #818cab;
}

Next Adding the HTML “toggle switch markup”
Paste the below HTML where you want dark/light mode toggle to appear.

<div class="theme-switch-wrapper"><label class="theme-switch" for="checkbox"><input type="checkbox" id="checkbox" /><div class="slider round"></div></label><em>Enable Dark Mode!</em></div>


Lastly, Add the JavaScript below before </body> tag

<script type='text/javascript'>
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);

if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}

function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
}
else { document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
}

toggleSwitch.addEventListener('change', switchTheme, false);

</script>


That’s all, you have Dark Mode activated on your blogger site.