Dark Mode

It’s effortless to switch Dark Mode in Falcon. You can enable Dark Mode by default or create a Dark/Light switch if you want. To set the default mode "Dark", please see the configuration page.

Toggle Dark Mode

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

Checkbox
Switch Input
Custom icon
Dropdown
Radio button
<div class="row">
  <div class="col">
    <h5 class="fs-9 mb-2">Checkbox </h5>
    <div class="form-check"><input class="form-check-input" id="flexCheckDefault" type="checkbox" data-theme-control="theme" /><label class="form-check-label" for="flexCheckDefault">Dark mode</label></div>
  </div>
  <div class="col">
    <h5 class="fs-9 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="theme" /><label for="switchDarkModeExample">Dark Mode</label></div>
  </div>
  <div class="col">
    <h5 class="fs-9 mb-2">Custom icon</h5>
    <div class="theme-control-toggle"><input class="form-check-input ms-0 theme-control-toggle-input" id="themeControlToggleExample" type="checkbox" data-theme-control="theme" value="dark" /><label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggleExample"><span class="fas fa-sun fs-9"></span></label><label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggleExample"><span class="fas fa-moon fs-9"></span></label></div>
  </div>
  <div class="col">
    <h5 class="fs-9 mb-2">Dropdown</h5>
    <div class="dropdown theme-control-dropdown font-sans-serif"><button class="btn btn-sm btn-falcon-default 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="bg-white dark__bg-1000 rounded-2 py-2"><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="light" data-theme-control="theme"><span class="fas fa-sun"></span>Light<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="dark" data-theme-control="theme"><span class="fas fa-moon" data-fa-transform=""></span>Dark<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button><button class="dropdown-item d-flex align-items-center gap-2" type="button" value="auto" data-theme-control="theme"><span class="fas fa-adjust" data-fa-transform=""></span>Auto<span class="fas fa-check dropdown-check-icon ms-auto text-600"></span></button></div>
      </div>
    </div>
  </div>
  <div class="col-12 mt-3">
    <h5 class="fs-9 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="theme" /><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="theme" /><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="theme" /><label class="form-check-label" for="flexRadioDefault3">Auto</label></div>
  </div>
</div>
Enable dark mode

Enable the built in dark color mode across your entire project by adding the data-bs-theme="dark" attribute to the <html> element. This will apply the dark color mode to all components and elements, other than those with a specific data-bs-theme attribute applied.

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>
If you are using gulp based workflow
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.

If you are not using gulp based workflow
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 :root[data-bs-theme=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] {
  --falcon-gray-100: #f9fafd;
  --falcon-gray-100-rgb: 249, 250, 253;

  --falcon-gray-200: #edf2f9;
  --falcon-gray-200-rgb: 237, 242, 249;

  --falcon-gray-300: #d8e2ef;
  --falcon-gray-300-rgb: 237, 242, 249;
}

[data-bs-theme=dark] {
  --falcon-gray-100: #0b1727;
  --falcon-gray-100-rgb: 11, 23, 39;

  --falcon-gray-200: #232e3c;
  --falcon-gray-200-rgb: 35, 46, 60;

  --falcon-gray-300: #344050;
  --falcon-gray-300-rgb: 52, 64, 80;
}
Using the Dark CSS classes in HTML
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 attributes -

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 -

This element will retain it's color if you switch between light and dark mode.

<div class="card bg-100" data-bs-theme="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>

This element will retain it's color if you switch between light and dark mode.

<div class="card bg-100" data-bs-theme="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:

This element will retain it's color if you switch between light and dark mode.

<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>
Emit JavaScript event on color scheme change

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

    }
  }
);

Thank you for creating with Falcon |
2024 © Themewagon

v3.22.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.

RTL Mode

Switch your language direction

RTL Documentation
Fluid Layout

Toggle container layout system

Fluid Documentation
Navigation Position

Select a suitable navigation system for your web application

Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize