Dark mode

How to work with dark mode?

Please note: If you update template directory structure, you also have to update css path in function.js file dark mode script.

Dark mode is enabled by default with dark mode switcher. If you don't want switcher you just need to remove switcher code from all HTML files.

<div class="modeswitch-wrap" id="darkModeSwitch">
	<div class="modeswitch-item">
		<div class="modeswitch-icon"></div>
	</div>
	<span>Dark mode</span>
</div>

Only dark mode

If you prefer only dark mode in your theme you just need to replace style.css with style-dark.css file in all HTML files.

<!-- Theme CSS -->
<link rel="stylesheet" type="text/css" href="assets/css/style-dark.css">

Disable dark mode

Simply remove switcher code from all HTML files and delete style-dark.scss file and dark folder.

Dark mode items

If you need to show or hide any elements in dark or light mode use .light-mode-item for elements that you want to show in light mode only and use.dark-mode-item for elements that you want to show in dark mode only. See below example that we have used for theme logo.

<img class="light-mode-item" src="assets/images/logo.svg" alt="logo">
<img class="dark-mode-item" src="assets/images/logo-light.svg" alt="logo">