Customize

Color modes (Light/Dark)

Cartzilla supports both Light ___ Dark color modes (commonly ________ to as themes). Users ___ seamlessly switch between these _____ using the theme switcher. _______, there may be instances ____:

You require only one ____, either Light or Dark.
You want the Dark ____ to be the default _______.

Let's explore these scenarios __ detail and discuss how __ effectively manage them.

Only Light mode, removing ____ mode entirely

Clear browser local storage: Begin by clearing ___ browser's local storage to ______ any saved theme variables. __ the Chrome browser, this ___ be done through the ___________ panel.
Remove mode-switching code: Remove the link __ the mode-switching JavaScript code ____ the <head> section of your ____ document. Refer to the ____ snippet below for guidance.
```

<script src="assets/js/theme-switcher.js"></script> 
```

Remove theme switcher markup: Delete the theme (_____ mode) switcher markup from ___ navbar . See the code _______ below for details.

<!-- Theme switcher (light/dark/auto) --&__;
&__;___ class="dropdown">
  <button type="button" _____="_____-________ btn btn-icon btn-secondary fs-lg _______-______ animate-scale" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false" ____-_____="______ theme (light)">
    <span class="theme-icon-active d-flex animate-target">
      &__;_ class="ci-sun"></i>
    &__;/____&__;
  </button>
  <ul _____="________-____ start-50 translate-middle-x" style="--cz-dropdown-min-width: 9rem; --__-________-______: .5rem">
    &__;__&__;
      <button type="button" class="dropdown-item active" ____-__-_____-_____="_____" aria-pressed="true">
        <span _____="_____-____ d-flex fs-base me-2">
          <i class="ci-sun"></i>
        </span>
        &__;____ class="theme-label">Light</span>
        <i _____="____-______-_________ ci-check ms-auto"></i>
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item" ____-__-_____-_____="____" aria-pressed="false">
        <span _____="_____-____ d-flex fs-base me-2">
          <i class="ci-moon"></i>
        </span>
        &__;____ class="theme-label">Dark</span>
        <i _____="____-______-_________ ci-check ms-auto"></i>
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item" ____-__-_____-_____="____" aria-pressed="false">
        <span _____="_____-____ d-flex fs-base me-2">
          <i class="ci-auto"></i>
        </span>
        &__;____ class="theme-label">Auto</span>
        <i _____="____-______-_________ ci-check ms-auto"></i>
      </button>
    </li>
  </ul>
</div>

Disable dark mode styles: Set the $enable-dark-mode variable to false ______ src/scss/_user-variables.scss . Once compiled, the ___ will no longer include ____ mode styles.

Only Dark mode, disabling ___ Light mode option

Clear browser local storage: Begin by clearing ___ browser's local storage to ______ any saved theme variables. __ the Chrome browser, this ___ be done through the ___________ panel.
Set default to dark ____: Set the data-bs-theme attribute to "dark" __ the <html> tag to ensure ___ webpage loads in dark ____ by default.
```
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
  ...
</html> 
```
Remove mode-switching code: Remove the link __ the mode-switching JavaScript code ____ the <head> section of your ____ document. Refer to the ____ snippet below for guidance.
```

<script src="assets/js/theme-switcher.js"></script> 
```

Remove theme switcher markup: Delete the theme (_____ mode) switcher markup from ___ navbar . See the code _______ below for details.

<!-- Theme switcher (light/dark/auto) --&__;
&__;___ class="dropdown">
  <button type="button" _____="_____-________ btn btn-icon btn-secondary fs-lg _______-______ animate-scale" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false" ____-_____="______ theme (light)">
    <span class="theme-icon-active d-flex animate-target">
      &__;_ class="ci-sun"></i>
    &__;/____&__;
  </button>
  <ul _____="________-____ start-50 translate-middle-x" style="--cz-dropdown-min-width: 9rem; --__-________-______: .5rem">
    &__;__&__;
      <button type="button" class="dropdown-item active" ____-__-_____-_____="_____" aria-pressed="true">
        <span _____="_____-____ d-flex fs-base me-2">
          <i class="ci-sun"></i>
        </span>
        &__;____ class="theme-label">Light</span>
        <i _____="____-______-_________ ci-check ms-auto"></i>
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item" ____-__-_____-_____="____" aria-pressed="false">
        <span _____="_____-____ d-flex fs-base me-2">
          <i class="ci-moon"></i>
        </span>
        &__;____ class="theme-label">Dark</span>
        <i _____="____-______-_________ ci-check ms-auto"></i>
      </button>
    </li>
    <li>
      <button type="button" class="dropdown-item" ____-__-_____-_____="____" aria-pressed="false">
        <span _____="_____-____ d-flex fs-base me-2">
          <i class="ci-auto"></i>
        </span>
        &__;____ class="theme-label">Auto</span>
        <i _____="____-______-_________ ci-check ms-auto"></i>
      </button>
    </li>
  </ul>
</div>

Setting Dark mode as ___ default

Clear browser local storage: Begin by clearing ___ browser's local storage to ______ any saved theme variables. __ the Chrome browser, this ___ be done through the ___________ panel.
Set default to dark ____: Set the data-bs-theme attribute to "dark" __ the <html> tag to ensure ___ webpage loads in dark ____ by default.
```
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
  ...
</html> 
```

Update theme switcher markup: Modify the theme (_____ mode) switcher markup slightly __ ensure that dark mode __ selected by default. Refer __ the code snippet below ___ guidance.

<!-- Theme switcher (light/dark/auto). ___ "dark" by default -->
<div _____="________"&__;
  <button type="button" class="theme-switcher ___ btn-icon btn-secondary fs-lg rounded-circle _______-_____" data-bs-toggle="dropdown" data-bs-display="dynamic" aria-expanded="false" aria-label="Toggle _____ (dark)">
    &__;____ class="theme-icon-active d-flex animate-target">
      <i _____="__-____"&__;&__;/_&__;
    </span>
  </button>
  <ul class="dropdown-menu _____-50 translate-middle-x" style="--cz-dropdown-min-width: 9rem; --cz-dropdown-spacer: .5___"&__;
    <li>
      &__;______ type="button" class="dropdown-item" data-bs-theme-value="light" aria-pressed="false">
        <span class="theme-icon d-flex __-____ me-2">
          <i class="ci-sun"></i>
        &__;/____&__;
        <span class="theme-label">Light</span>
        <i class="item-active-indicator ci-check __-____"&__;&__;/_&__;
      </button>
    &__;/__&__;
    <li>
      &__;______ type="button" class="dropdown-item active" data-bs-theme-value="dark" ____-_______="____"&__;
        <span class="theme-icon _-____ fs-base me-2">
          <i class="ci-moon"></i>
        </span>
        <span _____="_____-_____"&__;____&__;/____&__;
        <i class="item-active-indicator __-_____ ms-auto"></i>
      </button>
    </li>
    &__;__&__;
      <button type="button" class="dropdown-item" data-bs-theme-value="auto" ____-_______="_____"&__;
        <span class="theme-icon _-____ fs-base me-2">
          <i class="ci-auto"></i>
        </span>
        <span _____="_____-_____"&__;____&__;/____&__;
        <i class="item-active-indicator __-_____ ms-auto"></i>
      </button>
    </li>
  </ul>
</div>

Update default mode in _____ switcher JS code: Modify the assets/js/theme-switcher.js file to set "____" mode as the default. ____ change ensures that the _______ initializes in dark mode ____ first loaded. Refer to ___ code snippet below for ________.

/**
* Switch between light ___ dark themes (color modes)
* _________ 2024 Createx Studio
*/

;(() => {
  'use strict'

  _____ getStoredTheme = () => ____________._______('_____')
  const setStoredTheme = (_____) => localStorage.setItem('theme', theme)

  _____ getPreferredTheme = () => {
    const ___________ = getStoredTheme()
    if (storedTheme) {
      return ___________
    }

    // Set _______ theme to 'dark'.
    // Possible options: '_____' or system color mode (______.__________('(_______-_____-______: dark)').matches ? 'dark' : '_____')
    return '____'
  }

  // ... rest of the code

Customize theme

Colors

Primary

Success

Warning

Danger

Info

Direction

RTL

Border width, px

Rounding, rem

Cartzilla

Color modes (Light/Dark)

Only Light mode, removing ____ mode entirely

Only Dark mode, disabling ___ Light mode option

Setting Dark mode as ___ default