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 icon with dropdown

Result
HTML

<div class="nav-item dropdown">
	<button class="btn btn-link lh-2 p-0 mb-0" id="bd-theme"
	type="button"
	aria-expanded="false"
	data-bs-toggle="dropdown"
	data-bs-display="static">
	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"  class="bi bi-circle-half theme-icon-active fill-mode fa-fw" viewBox="0 0 16 16">
		<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
		<use href="#"></use>
	</svg>
	</button>

	<ul class="dropdown-menu min-w-auto dropdown-menu-end" aria-labelledby="bd-theme">
		<li class="mb-1">
			<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light">
				<svg width="16" height="16" fill="currentColor" class="bi bi-brightness-high-fill fa-fw mode-switch me-1" viewBox="0 0 16 16">
					<path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
					<use href="#"></use>
				</svg>Light
			</button>
		</li>
		<li class="mb-1">
			<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon-stars-fill fa-fw mode-switch me-1" viewBox="0 0 16 16">
					<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
					<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
					<use href="#"></use>
				</svg>Dark
			</button>
		</li>
		<li>
			<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto">
				<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-half fa-fw mode-switch me-1" viewBox="0 0 16 16">
					<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
					<use href="#"></use>
				</svg>Auto
			</button>
		</li>
	</ul>
</div>

Only dark mode

If you want the theme to use dark mode exclusively:

Add below attribute in your html tag in all HTML files.
```
<html lang="en" data-bs-theme="dark">
```
Remove darkmode script from head tag.

Only light mode (Remove dark mode)

To completely remove dark mode and use only the light mode:

Add the following line to the _variables.scss file and run Gulp to apply the changes:
```
$enable-dark-mode:            false; 
```
Remove switcher code from all HTML files
Optionally, remove dark mode script from the <head> tag of your HTML files.

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.

Note:Sometimes brand primary colors do not readable in dark mode, so we have provided option to set different primary colors for dark mode. To change dark mode primary color go to _user.scss file and follow the instruction.

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 selector data-bs-theme="dark" 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.

Changing the image or element in dark mode

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 the client logo.

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