Banzara

Toggle Dark Mode

Toggling dark mode is very easy in Banzara. You can toggle dark, light or auto mode by using checkbox, radio input, switch input and custom icon component.

<div class="row g-3">
  <div class="col">
    <h5 class="fs-8 mb-2">Checkbox </h5>
    <div class="form-check"><input class="form-check-input" id="flexCheckDefault" type="checkbox" data-theme-control="phoenixTheme" /><label class="form-check-label" for="flexCheckDefault">Dark mode</label></div>
  </div>
  <div class="col">
    <h5 class="fs-8 mb-2">Switch Input</h5>
    <div class="form-check form-switch ps-0"><input class="form-check-input ms-0 me-2" id="switchDarkModeExample" type="checkbox" data-theme-control="phoenixTheme" /><label for="switchDarkModeExample">Dark Mode</label></div>
  </div>
  <div class="col">
    <h5 class="fs-8 mb-2">Custom icon</h5>
    <div class="theme-control-toggle fa-ion-wait pe-2"><input class="form-check-input ms-0 theme-control-toggle-input" id="themeControlToggleDoc" type="checkbox" data-theme-control="phoenixTheme" value="dark" /><label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggleDoc" data-bs-toggle="tooltip" data-bs-placement="left" title="Switch theme"><span class="icon" data-feather="moon"></span></label><label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggleDoc" data-bs-toggle="tooltip" data-bs-placement="left" title="Switch theme"><span class="icon" data-feather="sun"></span></label></div>
  </div>
  <div class="col">
    <h5 class="fs-9 mb-2">Dropdown</h5>
    <div class="dropdown theme-control-dropdown"><button class="btn btn-sm btn-phoenix-secondary dropdown-toggle dropdown-caret-none" type="button" id="themeSwitchDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-sun" data-theme-dropdown-toggle-icon="light"></span><span class="fas fa-moon" data-theme-dropdown-toggle-icon="dark"></span><span class="fas fa-adjust" data-theme-dropdown-toggle-icon="auto"></span></button>
      <div class="dropdown-menu dropdown-caret border py-0 mt-2" aria-labelledby="themeSwitchDropdown">
        <div class="rounded-2 py-2"><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="light" data-theme-control="phoenixTheme"><span class="fas fa-sun"></span>Light<span class="fas fa-check dropdown-check-icon ms-auto text-body-quaternray"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="dark" data-theme-control="phoenixTheme"><span class="fas fa-moon" data-fa-transform=""></span>Dark<span class="fas fa-check dropdown-check-icon ms-auto text-body-quaternray"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="auto" data-theme-control="phoenixTheme"><span class="fas fa-adjust" data-fa-transform=""></span>Auto<span class="fas fa-check dropdown-check-icon ms-auto text-body-quaternray"></span></button></div>
      </div>
    </div>
  </div>
  <div class="col-12">
    <h5 class="fs-8 mb-2">Radio button</h5>
    <div class="form-check form-check-inline"><input class="form-check-input" id="flexRadioDefault1" type="radio" value="light" data-theme-control="phoenixTheme" /><label class="form-check-label" for="flexRadioDefault1">Light</label></div>
    <div class="form-check form-check-inline"><input class="form-check-input" id="flexRadioDefault2" type="radio" value="dark" data-theme-control="phoenixTheme" /><label class="form-check-label" for="flexRadioDefault2">Dark</label></div>
    <div class="form-check form-check-inline"><input class="form-check-input" id="flexRadioDefault3" type="radio" value="auto" data-theme-control="phoenixTheme" /><label class="form-check-label" for="flexRadioDefault3">Auto</label></div>
  </div>
</div>

Checkbox

Dark mode

Switch Input

Dark Mode

Custom icon

Dropdown

Radio button

Light

Dark

Auto

If you are using gulp based workflow

<h5 class="mb-2">Modify Dark colors using SCSS</h5>
<p class="mb-0">You can find all the variables used to create the dark mode in <code>/src/scss/theme/root/_dark.scss</code> file. If you want to override a variable, copy that variable to your <code>/src/scss/user.scss</code> file and update it as you see fit. When you change the variable with scss, make sure that the gulp is running.</p>

Modify Dark colors using SCSS

You can find all the variables used to create the dark mode in /src/scss/theme/root/_dark.scss file. If you want to override a variable, copy that variable to your /src/scss/user.scss file and update it as you see fit. When you change the variable with scss, make sure that the gulp is running.

If you are not using gulp based workflow

<h5 class="mb-2">Modify Dark colors using CSS</h5>
<p>You can find all the CSS variables used to create the dark mode in <code>/public/assets/css/theme.css</code> file. Look for the class <code>:root.dark</code> and you will see all the available variables. If you want to override a variable, copy that variable to your <code>/public/assets/css/user.css</code> file and update it as you see fit.</p><pre class="language-css"><code class="lang-css">/*-----------------------------------------------
  Theme Styles
-----------------------------------------------*/
:root, [data-bs-theme="light"] {
  --phoenix-body-color: #31374a;
  --phoenix-body-color-rgb: 49, 55, 74;

  --phoenix-body-bg: #e3e6ed;
  --phoenix-body-bg-rgb: 245, 247, 250;
}

[data-bs-theme="dark"] {
  --phoenix-body-color: #9fa6bc;
  --phoenix-body-color-rgb: 159, 166, 188;

  --phoenix-body-bg: #0f111a;
  --phoenix-body-bg-rgb: 15, 17, 26;
}
</code></pre>

Modify Dark colors using CSS

You can find all the CSS variables used to create the dark mode in /public/assets/css/theme.css file. Look for the class :root.dark and you will see all the available variables. If you want to override a variable, copy that variable to your /public/assets/css/user.css file and update it as you see fit.

/*-----------------------------------------------
  Theme Styles
-----------------------------------------------*/
:root, [data-bs-theme="light"] {
  --phoenix-body-color: #31374a;
  --phoenix-body-color-rgb: 49, 55, 74;

  --phoenix-body-bg: #e3e6ed;
  --phoenix-body-bg-rgb: 245, 247, 250;
}

[data-bs-theme="dark"] {
  --phoenix-body-color: #9fa6bc;
  --phoenix-body-color-rgb: 159, 166, 188;

  --phoenix-body-bg: #0f111a;
  --phoenix-body-bg-rgb: 15, 17, 26;
}

Using the Dark CSS classes in HTML

<h5 class="mb-3">You can keep a style constant regardless of current (light or dark) mode</h5>
<p>If you want a component to retain it’s color (light or dark) as it is regardless of the current mode, you can use the following classes -</p>
<p> <code>[data-bs-theme="light"]</code> - It will keep the color light even if the current mode is dark</p>
<p> <code>[data-bs-theme="dark"]</code> - It will keep the color dark even if the current mode is light</p>
<p>The following two examples illustrate the color persistency -</p>
<div class="row gx-3">
  <div class="col-lg-6">
    <h5>Keep the color light even if the current mode is dark</h5>
    <div class="card bg-body-highlight" data-bs-theme="light">
      <div class="card-body">
        <p class="mb-0 text-body-tertiary"><b>This element will retain its color if you switch between light and dark modes.</b></p>
      </div>
    </div><pre class="mt-2"><code class="language-html">&lt;div class=&quot;card bg-body-highlight&quot; data-bs-theme=&quot;light&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;p class=&quot;mb-0 text-body-tertiary&quot;&gt;&lt;b&gt;This element will retain its color if you switch between light and dark modes.&lt;/b&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
  </div>
  <div class="col-lg-6">
    <h5>Keep the color dark even if the current mode is light</h5>
    <div class="card bg-body-highlight" data-bs-theme="dark">
      <div class="card-body">
        <p class="mb-0 text-body-tertiary"><b>This element will retain its color if you switch between light and dark modes.</b></p>
      </div>
    </div><pre class="mt-2"><code class="language-html">&lt;div class=&quot;card bg-body-highlight&quot; data-bs-theme=&quot;dark&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;p class=&quot;mb-0 text-body-tertiary&quot;&gt;&lt;b&gt;This element will retain its color if you switch between light and dark modes.&lt;/b&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
  </div>
</div>
<h6 class="fs-8 mt-4">Override Background and Text color only for dark mode</h6>
<p>If you want to use a different text color or background color rather than the default dark theme color for any element, you can use the special "dark" classes: </p>
<ul>
  <li> <code>dark__bg-* </code></li>
  <li><code>dark__text-* </code></li>
</ul>
<p>The following element illustrates the example:</p>
<div class="card bg-light dark__bg-primary">
  <div class="card-body">
    <p class="mb-0"><span class="fw-bold">This element will get different bg color rather than the default dark theme color.</span></p>
  </div>
</div><pre class="mt-2"><code class="language-html">&lt;div class=&quot;card bg-light dark__bg-primary&quot;&gt;
  &lt;div class=&quot;card-body&quot;&gt;
    &lt;p class=&quot;mb-0&quot;&gt;&lt;span class=&quot;fw-bold&quot;&gt;This element will get different bg color rather than the default dark theme color.&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>

You can keep a style constant regardless of current (light or dark) mode

If you want a component to retain it’s color (light or dark) as it is regardless of the current mode, you can use the following classes -

[data-bs-theme="light"] - It will keep the color light even if the current mode is dark

[data-bs-theme="dark"] - It will keep the color dark even if the current mode is light

The following two examples illustrate the color persistency -

Keep the color light even if the current mode is dark

This element will retain its color if you switch between light and dark modes.

<div class="card bg-body-highlight" data-bs-theme="light">
  <div class="card-body">
    <p class="mb-0 text-body-tertiary"><b>This element will retain its color if you switch between light and dark modes.</b></p>
  </div>
</div>

Keep the color dark even if the current mode is light

This element will retain its color if you switch between light and dark modes.

<div class="card bg-body-highlight" data-bs-theme="dark">
  <div class="card-body">
    <p class="mb-0 text-body-tertiary"><b>This element will retain its color if you switch between light and dark modes.</b></p>
  </div>
</div>

Override Background and Text color only for dark mode

If you want to use a different text color or background color rather than the default dark theme color for any element, you can use the special "dark" classes:

dark__bg-*
dark__text-*

The following element illustrates the example:

This element will get different bg color rather than the default dark theme color.

<div class="card bg-light dark__bg-primary">
  <div class="card-body">
    <p class="mb-0"><span class="fw-bold">This element will get different bg color rather than the default dark theme color.</span></p>
  </div>
</div>

Emit JavaScript event on color scheme change

<p>When you switch between the dark and light mode, or change any settings from the global theme config at runtime, we emit an event <code>clickControl</code>.<br />We used this event to update colors using JavaScript. For example, the charts change their colors using this event. You can catch and use this event with the following code snippet:</p><pre><code class="lang-js">const themeController = document.body;

themeController.addEventListener(
  "clickControl",
  ({ detail: { control, value } }) => {

    if (control === "phoenixTheme") {
      // value will be localStorage theme value (dark/light/auto)
      const mode = value === 'auto' ? window.phoenix.utils.getSystemTheme() : value;
      console.log(mode) 
      // your code here

    }
  }
);</code></pre>

When you switch between the dark and light mode, or change any settings from the global theme config at runtime, we emit an event clickControl.
We used this event to update colors using JavaScript. For example, the charts change their colors using this event. You can catch and use this event with the following code snippet:

const themeController = document.body;

themeController.addEventListener(
  "clickControl",
  ({ detail: { control, value } }) => {

    if (control === "phoenixTheme") {
      // value will be localStorage theme value (dark/light/auto)
      const mode = value === 'auto' ? window.phoenix.utils.getSystemTheme() : value;
      console.log(mode) 
      // your code here

    }
  }
);

MacBook Air - 13″

MacBook Pro - 13″

Carry Anna

John Smith

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Forms

Icons

ECharts

Components

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Forms

Icons

ECharts

Components

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Forms

Icons

ECharts

Components

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Forms

Icons

ECharts

Components

Tables

Utilities

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

MacBook Air - 13″

MacBook Pro - 13″

Carry Anna

John Smith

Notifications

Jessie Samson

Jane Foster

Jessie Samson

Kiera Anderson

Herman Carter

Benjamin Button

Jerry Seinfield

Forms

Icons

ECharts

Components