Dark Mode
It’s effortless to switch Dark Mode in Phoenix. You can enable Dark Mode by default or create a Dark/Light switch if you want. To set the default mode "Dark",you can also set system default theme in Phoenix. Please see the configuration page.
Toggle Dark Mode
Toggling dark mode is very easy in Phoenix. 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
Switch Input
Custom icon
Dropdown
Radio button
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"><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></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"><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></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"><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></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
}
}
);