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-0 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-0 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-0 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-0"></span></label>
<label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggleExample"><span class="fas fa-moon fs-0"></span></label>
</div>
</div>
<div class="col">
<h5 class="fs-0 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-0 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: 11, 23, 39;
--falcon-gray-200: #232e3c;
--falcon-gray-200: 35, 46, 60;
--falcon-gray-300: #344050;
--falcon-gray-300: 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
}
}
);
