extends ../../layouts/LayoutComponent append variables - var pageHeader = { title: 'Dark Mode', description: `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.` } block component +ComponentCard({ title: 'Toggle Dark Mode', description: `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.`, descriptionClass:'mt-2', anchor: false, }).my-5 .row.g-3 .col h5.fs-8.mb-2 Checkbox .form-check input#flexCheckDefault.form-check-input(type='checkbox' data-theme-control="phoenixTheme") label.form-check-label(for='flexCheckDefault') Dark mode .col h5.fs-8.mb-2 Switch Input .form-check.form-switch.ps-0 input#switchDarkModeExample.form-check-input.ms-0.me-2( type='checkbox' data-theme-control="phoenixTheme" ) label(for="switchDarkModeExample") Dark Mode .col h5.fs-8.mb-2 Custom icon .theme-control-toggle.fa-ion-wait.pe-2&attributes(attributes) input#themeControlToggleDoc.form-check-input.ms-0.theme-control-toggle-input( type='checkbox' data-theme-control="phoenixTheme" value='dark' ) label.mb-0.theme-control-toggle-label.theme-control-toggle-light(for="themeControlToggleDoc" data-bs-toggle="tooltip" data-bs-placement="left" title="Switch theme") span.icon(data-feather='moon') label.mb-0.theme-control-toggle-label.theme-control-toggle-dark(for="themeControlToggleDoc" data-bs-toggle="tooltip" data-bs-placement="left" title="Switch theme") span.icon(data-feather='sun') .col h5.fs-9.mb-2 Dropdown .dropdown.theme-control-dropdown button.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.fas.fa-sun(data-theme-dropdown-toggle-icon="light") span.fas.fa-moon(data-theme-dropdown-toggle-icon="dark") span.fas.fa-adjust(data-theme-dropdown-toggle-icon="auto") .dropdown-menu.dropdown-caret.border.py-0.mt-2(aria-labelledby="themeSwitchDropdown") .rounded-2.py-2 button(type="button" value='light' data-theme-control="phoenixTheme").dropdown-item.d-flex.align-items-center.gap-2 span.fas.fa-sun | Light span.fas.fa-check.dropdown-check-icon.ms-auto.text-body-quaternray button(type="button" value='dark' data-theme-control="phoenixTheme").dropdown-item.d-flex.align-items-center.gap-2 span.fas.fa-moon(data-fa-transform="") | Dark span.fas.fa-check.dropdown-check-icon.ms-auto.text-body-quaternray button(type="button" value='auto' data-theme-control="phoenixTheme").dropdown-item.d-flex.align-items-center.gap-2 span.fas.fa-adjust(data-fa-transform="") | Auto span.fas.fa-check.dropdown-check-icon.ms-auto.text-body-quaternray .col-12 h5.fs-8.mb-2 Radio button .form-check.form-check-inline input#flexRadioDefault1.form-check-input(type='radio' value='light' data-theme-control="phoenixTheme") label.form-check-label(for='flexRadioDefault1') Light .form-check.form-check-inline input#flexRadioDefault2.form-check-input(type='radio' value="dark" data-theme-control="phoenixTheme") label.form-check-label(for='flexRadioDefault2') Dark .form-check.form-check-inline input#flexRadioDefault3.form-check-input(type='radio' value="auto" data-theme-control="phoenixTheme") label.form-check-label(for='flexRadioDefault3') Auto +ComponentCard({ title: 'If you are using gulp based workflow', hideNavTab: true, anchor: false, }).my-5 h5.mb-2 Modify Dark colors using SCSS p.mb-0 You can find all the variables used to create the dark mode in code /src/scss/theme/root/_dark.scss | file. If you want to override a variable, copy that variable to your code /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. +ComponentCard({ title: 'If you are not using gulp based workflow', hideNavTab: true, anchor: false, }).my-5 h5.mb-2 Modify Dark colors using CSS p You can find all the CSS variables used to create the dark mode in code /public/assets/css/theme.css | file. Look for the class code :root.dark | 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 | file and update it as you see fit. pre.language-css code.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; } +ComponentCard({ title: 'Using the Dark CSS classes in HTML', hideNavTab: true, anchor: false, }).my-5 h5.mb-3 You can keep a style constant regardless of current (light or dark) mode 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 code [data-bs-theme="light"] | - It will keep the color light even if the current mode is dark p code [data-bs-theme="dark"] | - It will keep the color dark even if the current mode is light p The following two examples illustrate the color persistency - .row.gx-3 .col-lg-6 h5 Keep the color light even if the current mode is dark .card.bg-body-highlight(data-bs-theme="light") .card-body p.mb-0.text-body-tertiary b This element will retain its color if you switch between light and dark modes. +ComponentCardLib.mt-2 .card.bg-body-highlight(data-bs-theme="light") .card-body p.mb-0.text-body-tertiary b This element will retain its color if you switch between light and dark modes. .col-lg-6 h5 Keep the color dark even if the current mode is light .card.bg-body-highlight(data-bs-theme="dark") .card-body p.mb-0.text-body-tertiary b This element will retain its color if you switch between light and dark modes. +ComponentCardLib.mt-2 .card.bg-body-highlight(data-bs-theme="dark") .card-body p.mb-0.text-body-tertiary b This element will retain its color if you switch between light and dark modes. h6.fs-8.mt-4 Override Background and Text color only for dark mode 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: ul li code dark__bg-* li code dark__text-* p The following element illustrates the example: .card.bg-light.dark__bg-primary .card-body p.mb-0 span.fw-bold This element will get different bg color rather than the default dark theme color. +ComponentCardLib.mt-2 .card.bg-light.dark__bg-primary .card-body p.mb-0 span.fw-bold This element will get different bg color rather than the default dark theme color. +ComponentCard({ title: 'Emit JavaScript event on color scheme change', hideNavTab: true, anchor: false, }).my-5 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 | . 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: pre code.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 } } );