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

Only dark mode

If you prefer only dark mode in your theme:

Add below attribute in your html tag in your index.html files
```
<html lang="en" data-bs-theme="dark">
```
Remove darkmode context from your app

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 vite development server.
```
$enable-dark-mode:            false; 
```
Remove switcher and context from all your .tsx or .ts files

Dark mode customization

Modify Dark colors using SCSS

You can find all the variables used to create the dark mode in src/assets/scss/_dark-mode.scss file. If you want to override a variable, copy that variable to your src/assets/scss/_user.scss file and update it as per your need. When you change the variable with scss, make sure that the Vite server 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. As we provide in our demo site. To change dark mode primary color go to _user.scss file and follow the instruction.

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 navbar-brand-item" src="@/assets/images/logo.svg" alt="logo" />
<img class="dark-mode-item navbar-brand-item" src="@/assets/images/logo-light.svg" alt="logo" />