Customize

Color modes (Light/Dark)

Cartzilla supports both Light and Dark color modes (commonly referred to as themes). Users can seamlessly switch between these modes using the theme switcher. However, there may be instances when:

  1. You require only one mode, either Light or Dark.
  2. You want the Dark mode to be the default setting.

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

Only Light mode, removing Dark mode entirely

  1. Clear browser local storage: Begin by clearing the browser's local storage to remove any saved theme variables. In the Chrome browser, this can be done through the Application panel.
    Chrome local storage
  2. Remove mode-switching code: In the root layout.tsx file, remove the import of ThemeProvider from next-themes and remove the wrapper component that encloses the content inside <ThemeProvider>.
    // src/app/layout.tsx
...
import { ThemeProvider } from 'next-themes'
...
<ThemeProvider attribute="data-bs-theme" defaultTheme="light" disableTransitionOnChange>
  <ProgressProvider>
    <OffcanvasProvider>
      <ModalProvider>
        <CartProvider>{children}</CartProvider>
      </ModalProvider>
    </OffcanvasProvider>
    <div className="floating-buttons position-fixed top-50 end-0 z-sticky me-3 me-xl-4 pb-4">
      <ScrollTopButton scrollOffset={500} />
    </div>
  </ProgressProvider>
</ThemeProvider>
...
  3. Remove all instances of the ThemeSwitcher component: Delete all occurrences of the <ThemeSwitcher> component, typically found inside the <Navbar> component.
  4. Disable dark mode styles: Set the $enable-dark-mode variable to false inside src/styles/_user-variables.scss. Once compiled, the CSS will no longer include dark mode styles.

Only Dark mode, disabling the Light mode option

  1. Set default theme to dark mode: In the root layout.tsx file, set the defaultTheme prop to "dark" on the <ThemeProvider> component to ensure the webpage loads in dark mode by default.
    // src/app/layout.tsx
...
<ThemeProvider attribute="data-bs-theme" defaultTheme="dark" disableTransitionOnChange>
  <ProgressProvider>
    <OffcanvasProvider>
      <ModalProvider>
        <CartProvider>{children}</CartProvider>
      </ModalProvider>
    </OffcanvasProvider>
    <div className="floating-buttons position-fixed top-50 end-0 z-sticky me-3 me-xl-4 pb-4">
      <ScrollTopButton scrollOffset={500} />
    </div>
  </ProgressProvider>
</ThemeProvider>
...
  2. Clear browser local storage: Next, clear the browser's local storage to remove any saved theme variables. In the Chrome browser, this can be done through the Application panel.
    Chrome local storage
  3. Remove all instances of the ThemeSwitcher component: Finally, delete all occurrences of the <ThemeSwitcher> component, typically found inside the <Navbar> component.

Setting Dark mode as the default

  1. Set default theme to dark mode: In the root layout.tsx file, set the defaultTheme prop to "dark" on the <ThemeProvider> component to ensure the webpage loads in dark mode by default.
    // src/app/layout.tsx
...
<ThemeProvider attribute="data-bs-theme" defaultTheme="dark" disableTransitionOnChange>
  <ProgressProvider>
    <OffcanvasProvider>
      <ModalProvider>
        <CartProvider>{children}</CartProvider>
      </ModalProvider>
    </OffcanvasProvider>
    <div className="floating-buttons position-fixed top-50 end-0 z-sticky me-3 me-xl-4 pb-4">
      <ScrollTopButton scrollOffset={500} />
    </div>
  </ProgressProvider>
</ThemeProvider>
...
  2. Clear browser local storage: Next, clear the browser's local storage to remove any saved theme variables. In the Chrome browser, this can be done through the Application panel.
    Chrome local storage
Top