Dark mode

How to work with dark mode?

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

<!-- Dark mode switch -->
<div class="modeswitch" id="darkModeSwitch">
	<div class="switch"></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 examples that we have used in 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">