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/theme/user.scss file and update it as you see fit. When you change the variable with scss, make sure that the gulp is running.

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, :root.light, :root .light {
  --falcon-100: #f9fafd;
  --falcon-200: #edf2f9;
  --falcon-300: #d8e2ef;
}

.dark {
  --falcon-100: #0b1727;
  --falcon-200: #232e3c;
  --falcon-300: #344050;
}

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 -

.light - It will keep the color light even if the current mode is dark

.dark - It will keep the color dark even if the current mode is light

The following two examples illustrate the color persistency -

<div class="card bg-100 light">
  <div class="card-body">
    <p class="mb-0 text-700"><b>This element will retain it's color if you switch between light and dark mode.</b></p>
  </div>
</div>

<div class="card bg-100 dark">
  <div class="card-body">
    <p class="mb-0 text-700"><b>This element will retain it's color if you switch between light and dark mode.</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:

<div class="card bg-light dark__bg-primary">
  <div class="card-body">
    <p class="mb-0"><span class="fw-bold">This element will retain it's color if you switch between light and dark mode.</span></p>
  </div>
</div>

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 === "theme") {
      console.log(value) // value will be localStorage theme value (dark/light)
      // your code here

    }
  }
);