Dark mode

How to work with dark mode?

Dark mode switch (Toggle)

Dark mode switcher is enabled by default. If you don't want switcher you just need to remove switcher code from all HTML files. See switcher code example below:

Dark mode switch:

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

Dark mode switch mini:

<div class="modeswitch-mini" id="darkModeSwitch">
	<div class="modeswitch-mini-item">
		<div class="modeswitch-mini-icon"></div>
	</div>
</div>

Only dark mode

If you prefer only dark mode in your theme:

Add dark-mode class in your html tag in all HTML files.
```
<html class="dark-mode">
```
Remove darkmode script from head tag and function.js file.

Only light mode (Remove dark mode)

To remove dark mode from theme, follow below steps:

Add below line in _user-variables.scss file while running gulp.
```
$enable-dark-mode:            false; 
```
Remove switcher code from all HTML files
Remove darkmode script from head tag and function.js file. (Optional but recommended)

Note: If you are not working with gulp, you can skip 1st step..

Dark mode customization

Modify Dark colors using SCSS

You can find all the variables used to create the dark mode in assets/scss/_dark-mode.scss file. If you want to override a variable, copy that variable to your assets/scss/_user.scss file and update it as per your need. When you change the variable with scss, make sure that the gulp is running.

Modify Dark colors using CSS

You can find all the CSS variables used to create the dark mode in assets/css/style.css file. Look for the class .dark-mode and you will see all the available variables. If you want to override a variable, copy that variable to your custom.css file and update it as per your need.

Dark mode items

You can 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. 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">