Color modes
CoreUI now supports color modes, or themes, as of v5.0.0. Explore our default light color mode and the new dark mode, or create your own using our styles as your template.
🤖 Looking for the LLM-optimized version?View llm.md
Dark mode
CoreUI for Bootstrap now supports color modes, starting with dark mode! With v5.0.0 you can implement your own color mode toggler (see below for an example from CoreUI for Bootstrap’s docs) and apply the different color modes as you see fit. We support a light mode (default) and now dark mode. Color modes can be toggled globally on the<html> element, or on specific components and elements, thanks to thedata-coreui-theme attribute.
Alternatively, you can also switch to a media query implementation thanks to our color mode mixin—seethe usage section for details. Heads up though—this eliminates your ability to change themes on a per-component basis as shown below.
Example
For example, to change the color mode of a dropdown menu, adddata-coreui-theme="light" ordata-coreui-theme="dark" to the parent.dropdown. Now, no matter the global color mode, these dropdowns will display with the specified theme value.
<divclass="dropdown"data-coreui-theme="light"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenuButtonLight"data-coreui-toggle="dropdown"aria-expanded="false"> Default dropdown</button><ulclass="dropdown-menu"aria-labelledby="dropdownMenuButtonLight"><li><aclass="dropdown-item active"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div><divclass="dropdown"data-coreui-theme="dark"><buttonclass="btn btn-secondary dropdown-toggle"type="button"id="dropdownMenuButtonDark"data-coreui-toggle="dropdown"aria-expanded="false"> Dark dropdown</button><ulclass="dropdown-menu"aria-labelledby="dropdownMenuButtonDark"><li><aclass="dropdown-item active"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div>How it works
As shown above, color mode styles are controlled by the
data-coreui-themeattribute. This attribute can be applied to the<html>element, or to any other element or CoreUI for Bootstrap component. If applied to the<html>element, it will apply to everything. If applied to a component or element, it will be scoped to that specific component or element.For each color mode you wish to support, you’ll need to add new overrides for the shared global CSS variables. We do this already in our
_root.scssstylesheet for dark mode, with light mode being the default values. In writing color mode specific styles, use the mixin:// Color mode variables in _root.scss@include color-mode(dark){// CSS variable overrides here...}We use a custom
_variables-dark.scssto power those shared global CSS variable overrides for dark mode. This file isn’t required for your own custom color modes, but it’s required for our dark mode for two reasons. First, it’s better to have a single place to reset global colors. Second, some Sass variables had to be overridden for background images embedded in our CSS for accordions, form components, and more.
Usage
Enable dark mode
Enable the built in dark color mode across your entire project by adding thedata-coreui-theme="dark" attribute to the<html> element. This will apply the dark color mode to all components and elements, other than those with a specificdata-coreui-theme attribute applied. Building on thequick start template:
<!doctype html><htmllang="en"data-coreui-theme="dark"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><title>CoreUI for Bootstrap demo</title><linkhref="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/css/coreui.min.css"rel="stylesheet"integrity="sha384-oMIIhJL1T5s+PxJr6+Qb0pO1IRFB6OGMM+J57UBT3UQKxSVsb++MkXpu9cLqaJxu"crossorigin="anonymous"></head><body><h1>Hello, world!</h1><scriptsrc="https://cdn.jsdelivr.net/npm/@coreui/[email protected]/dist/js/coreui.bundle.min.js"integrity="sha384-SWhFOmxmv1pfTLKVBW7q8uossvuaWNeQFdmaWi6xdldiUjyqG9F6V2R2BOC8gkxx"crossorigin="anonymous"></script></body></html>CoreUI for Bootstrap does not yet ship with a built-in color mode picker, but you can use the one from our own documentation if you like.Learn more in the JavaScript section.
Building with Sass
Our new dark mode option is available to use for all users of CoreUI for Bootstrap, but it’s controlled via data attributes instead of media queries and does not automatically toggle your project’s color mode. You can disable our dark mode entirely via Sass by changing$enable-dark-mode tofalse.
We use a custom Sass mixin,color-mode(), to help you controlhow color modes are applied. By default, we use adata attribute approach, allowing you to create more user-friendly experiences where your visitors can choose to have an automatic dark mode or control their preference (like in our own docs here). This is also an easy and scalable way to add different themes and more custom color modes beyond light and dark.
In case you want to use media queries and only make color modes automatic, you can change the mixin’s default type via Sass variable. Consider the following snippet and its compiled CSS output.
$color-mode-type:data;@include color-mode(dark){.element{color:var(--cui-primary-text-emphasis);background-color:var(--cui-primary-bg-subtle);}}Outputs to:
[data-coreui-theme=dark].element{color:var(--cui-primary-text-emphasis);background-color:var(--cui-primary-bg-subtle);}And when setting tomedia-query:
$color-mode-type:media-query;@include color-mode(dark){.element{color:var(--cui-primary-text-emphasis);background-color:var(--cui-primary-bg-subtle);}}Outputs to:
@media(prefers-color-scheme:dark){.element{color:var(--cui-primary-text-emphasis);background-color:var(--cui-primary-bg-subtle);}}Custom color modes
While the primary use case for color modes is light and dark mode, custom color modes are also possible. Create your owndata-coreui-theme selector with a custom value as the name of your color mode, then modify our Sass and CSS variables as needed. We opted to create a separate_variables-dark.scss stylesheet to house CoreUI for Bootstrap’s dark mode specific Sass variables, but that’s not required for you.
For example, you can create a “blue theme” with the selectordata-coreui-theme="blue". In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides.
[data-coreui-theme="blue"]{--cui-body-color:var(--cui-white);--cui-body-color-rgb:#{to-rgb($white)};--cui-body-bg:var(--cui-blue);--cui-body-bg-rgb:#{to-rgb($blue)};--cui-tertiary-bg:#{$blue-600};.dropdown-menu{--cui-dropdown-bg:#{color.mix($blue-500,$blue-600)};--cui-dropdown-link-active-bg:#{$blue-700};}.btn-secondary{--cui-btn-bg:#{color.mix($gray-600,$blue-400,50%)};--cui-btn-border-color:#{rgba($white,.25)};--cui-btn-hover-bg:#{color.scale(color.mix($gray-600,$blue-400,50%),$lightness:-8%)};// stylelint-disable-line scss/at-function-named-arguments--cui-btn-hover-border-color:#{rgba($white,.25)};--cui-btn-active-bg:#{color.scale(color.mix($gray-600,$blue-400,50%),$lightness:-16%)};// stylelint-disable-line scss/at-function-named-arguments--cui-btn-active-border-color:#{rgba($white,.5)};--cui-btn-focus-border-color:#{rgba($white,.5)};--cui-btn-focus-box-shadow:000.25remrgba(255,255,255,.2);}}Some paragraph text to show how the blue theme might look with written copy.
<divdata-coreui-theme="blue"> ...</div>JavaScript
To allow visitors or users to toggle color modes, you’ll need to create a toggle element to control thedata-coreui-theme attribute on the root element,<html>. We’ve built a toggler in our documentation that initially defers to a user’s current system color mode, but provides an option to override that and pick a specific color mode.
Here’s a look at the JavaScript that powers it. Feel free to inspect our own documentation navbar to see how it’s implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site. Note that if you decide to use media queries for your color modes, your JavaScript may need to be modified or removed if you prefer an implicit control.
/*! * Color mode toggler for CoreUI's docs (https://coreui.io/) * Copyright (c) 2025 creativeLabs Łukasz Holeczek * Licensed under the Creative Commons Attribution 3.0 Unported License. */(()=>{'use strict'constTHEME='coreui-docs-theme'constgetStoredTheme=()=>localStorage.getItem(THEME)constsetStoredTheme=theme=>localStorage.setItem(THEME,theme)constgetPreferredTheme=()=>{conststoredTheme=getStoredTheme()if(storedTheme){returnstoredTheme}returnwindow.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'}constsetTheme=theme=>{if(theme==='auto'){document.documentElement.setAttribute('data-coreui-theme',(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'))document.documentElement.setAttribute('data-bs-theme',(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'))}else{document.documentElement.setAttribute('data-coreui-theme',theme)document.documentElement.setAttribute('data-bs-theme',theme)}}setTheme(getPreferredTheme())constshowActiveTheme=theme=>{constactiveThemeIcon=document.querySelector('.theme-icon-active')constbtnToActive=document.querySelector(`[data-coreui-theme-value="${theme}"]`)constsvgOfActiveBtn=btnToActive.querySelector('svg.theme-icon')document.querySelectorAll('[data-coreui-theme-value]').forEach(element=>{element.classList.remove('active')})btnToActive.classList.add('active')activeThemeIcon.innerHTML=svgOfActiveBtn.innerHTML}window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change',()=>{conststoredTheme=getStoredTheme()if(storedTheme!=='light'&&storedTheme!=='dark'){setTheme(getPreferredTheme())}})window.addEventListener('DOMContentLoaded',()=>{showActiveTheme(getPreferredTheme())document.querySelectorAll('[data-coreui-theme-value]').forEach(toggle=>{toggle.addEventListener('click',()=>{consttheme=toggle.getAttribute('data-coreui-theme-value')setStoredTheme(theme)setTheme(theme)showActiveTheme(theme)})})})})()Adding theme colors
Adding a new color in$theme-colors is not enough for some of our components likealerts andlist groups. New colors must also be defined in$theme-colors-text,$theme-colors-bg-subtle, and$theme-colors-border-subtle for light theme; but also in$theme-colors-text-dark,$theme-colors-bg-subtle-dark, and$theme-colors-border-subtle-dark for dark theme.
This is a manual process because Sass cannot generate its own Sass variables from an existing variable or map. In future versions of Bootstrap, we’ll revisit this setup to reduce the duplication.
Heads up! Since@coreui/coreui v5.3.0 and@coreui/coreui-pro v5.10.0, we support Sass modules.
You can now use the modern@use and@forward rules instead of@import, which is deprecated and will be removed in Dart Sass 3.0.0. Using@import will result in a compilation warning. You can learn more about this transitionhere.
// Required@use"sass:map";@use"variables"as*;@use"maps"as*;// Add a custom color to $theme-colors$custom-colors:("custom-color":#712cf9);$theme-colors:map.merge($theme-colors,$custom-colors);// Add a custom color to new theme maps// Light mode$custom-colors-text:("custom-color":#712cf9);$custom-colors-bg-subtle:("custom-color":#e1d2fe);$custom-colors-border-subtle:("custom-color":#bfa1fc);$theme-colors-text:map.merge($theme-colors-text,$custom-colors-text);$theme-colors-bg-subtle:map.merge($theme-colors-bg-subtle,$custom-colors-bg-subtle);$theme-colors-border-subtle:map.merge($theme-colors-border-subtle,$custom-colors-border-subtle);// Dark mode$custom-colors-text-dark:("custom-color":#e1d2f2);$custom-colors-bg-subtle-dark:("custom-color":#8951fa);$custom-colors-border-subtle-dark:("custom-color":#e1d2f2);$theme-colors-text-dark:map.merge($theme-colors-text-dark,$custom-colors-text-dark);$theme-colors-bg-subtle-dark:map.merge($theme-colors-bg-subtle-dark,$custom-colors-bg-subtle-dark);$theme-colors-border-subtle-dark:map.merge($theme-colors-border-subtle-dark,$custom-colors-border-subtle-dark);// Import CoreUI@use"coreui";Sass@import are deprecated and will be removed in Dart Sass 3.0.0.!
You can also use@import rules, but please be aware that they are deprecated and will be removed in Dart Sass 3.0.0, resulting in a compilation warning. You can learn more about this deprecationhere.
// Required@import"functions";@import"variables";@import"variables-dark";// Add a custom color to $theme-colors$custom-colors:("custom-color":#712cf9);$theme-colors:map-merge($theme-colors,$custom-colors);@import"maps";@import"mixins";@import"utilities";// Add a custom color to new theme maps// Light mode$custom-colors-text:("custom-color":#712cf9);$custom-colors-bg-subtle:("custom-color":#e1d2fe);$custom-colors-border-subtle:("custom-color":#bfa1fc);$theme-colors-text:map-merge($theme-colors-text,$custom-colors-text);$theme-colors-bg-subtle:map-merge($theme-colors-bg-subtle,$custom-colors-bg-subtle);$theme-colors-border-subtle:map-merge($theme-colors-border-subtle,$custom-colors-border-subtle);// Dark mode$custom-colors-text-dark:("custom-color":#e1d2f2);$custom-colors-bg-subtle-dark:("custom-color":#8951fa);$custom-colors-border-subtle-dark:("custom-color":#e1d2f2);$theme-colors-text-dark:map-merge($theme-colors-text-dark,$custom-colors-text-dark);$theme-colors-bg-subtle-dark:map-merge($theme-colors-bg-subtle-dark,$custom-colors-bg-subtle-dark);$theme-colors-border-subtle-dark:map-merge($theme-colors-border-subtle-dark,$custom-colors-border-subtle-dark);// Remainder of CoreUI for Bootstrap imports@import"root";@import"reboot";// etcCustomizing
CSS variables
Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults todata-coreui-theme butcan be configured to use aprefers-color-scheme media query. Use these variables as a guideline for generating your own new color modes.
--#{$prefix}body-color:#{$body-color-dark};--#{$prefix}body-color-rgb:#{to-rgb($body-color-dark)};--#{$prefix}body-bg:#{$body-bg-dark};--#{$prefix}body-bg-rgb:#{to-rgb($body-bg-dark)};--#{$prefix}emphasis-color:#{$body-emphasis-color-dark};--#{$prefix}emphasis-color-rgb:#{to-rgb($body-emphasis-color-dark)};--#{$prefix}secondary-color:#{$body-secondary-color-dark};--#{$prefix}secondary-color-rgb:#{to-rgb($body-secondary-color-dark)};--#{$prefix}secondary-bg:#{$body-secondary-bg-dark};--#{$prefix}secondary-bg-rgb:#{to-rgb($body-secondary-bg-dark)};--#{$prefix}tertiary-color:#{$body-tertiary-color-dark};--#{$prefix}tertiary-color-rgb:#{to-rgb($body-tertiary-color-dark)};--#{$prefix}tertiary-bg:#{$body-tertiary-bg-dark};--#{$prefix}tertiary-bg-rgb:#{to-rgb($body-tertiary-bg-dark)};--#{$prefix}elevation-base-color:#{$elevation-base-color-dark};// Deprecated in v5.0.0--#{$prefix}high-emphasis:#{$high-emphasis-dark};// Deprecated in v5.0.0--#{$prefix}medium-emphasis:#{$medium-emphasis-dark};// Deprecated in v5.0.0--#{$prefix}disabled:#{$disabled-dark};// Deprecated in v5.0.0@each$color,$valuein$theme-colors-dark{--#{$prefix}#{$color}:#{$value};}@each$color,$valuein$grays-dark{--#{$prefix}gray-#{$color}:#{$value};}@each$color,$valuein$theme-colors-rgb-dark{--#{$prefix}#{$color}-rgb:#{$value};}@each$color,$valuein$theme-colors-text-dark{--#{$prefix}#{$color}-text-emphasis:#{$value};}@each$color,$valuein$theme-colors-bg-subtle-dark{--#{$prefix}#{$color}-bg-subtle:#{$value};}@each$color,$valuein$theme-colors-border-subtle-dark{--#{$prefix}#{$color}-border-subtle:#{$value};}@each$color,$valuein$theme-gradients-dark{--#{$prefix}#{$color}-start:#{map.get($value,"start")};--#{$prefix}#{$color}-stop:#{map.get($value,"stop")};}--#{$prefix}heading-color:#{$headings-color-dark};--#{$prefix}link-color:#{$link-color-dark};--#{$prefix}link-hover-color:#{$link-hover-color-dark};--#{$prefix}link-color-rgb:#{to-rgb($link-color-dark)};--#{$prefix}link-hover-color-rgb:#{to-rgb($link-hover-color-dark)};--#{$prefix}code-color:#{$code-color-dark};--#{$prefix}highlight-color:#{$mark-color-dark};--#{$prefix}highlight-bg:#{$mark-bg-dark};--#{$prefix}border-color:#{$border-color-dark};--#{$prefix}border-color-translucent:#{$border-color-translucent-dark};--#{$prefix}form-valid-color:#{$form-valid-color-dark};--#{$prefix}form-valid-border-color:#{$form-valid-border-color-dark};--#{$prefix}form-invalid-color:#{$form-invalid-color-dark};--#{$prefix}form-invalid-border-color:#{$form-invalid-border-color-dark};Sass variables
CSS variables for our dark color mode are partially generated from dark mode specific Sass variables in_variables-dark.scss. This also includes some custom overrides for changing the colors of embedded SVGs used throughout our components.
$gray-100-dark:$gray-100;$gray-200-dark:$gray-200;$gray-300-dark:$gray-300;$gray-400-dark:$gray-400;$gray-500-dark:$gray-500;$gray-600-dark:$gray-600;$gray-700-dark:$gray-700;$gray-800-dark:$gray-800;$gray-900-dark:$gray-900;// fusv-disable$grays-dark:("100":$gray-100-dark,"200":$gray-200-dark,"300":$gray-300-dark,"400":$gray-400-dark,"500":$gray-500-dark,"600":$gray-600-dark,"700":$gray-700-dark,"800":$gray-800-dark,"900":$gray-900-dark);// fusv-enable// fusv-disable$high-emphasis-dark:rgba($white,.87);// Deprecated in v5.0.0$medium-emphasis-dark:rgba($white,.6);// Deprecated in v5.0.0$disabled-dark:rgba($white,.38);// Deprecated in v5.0.0// fusv-enable$primary-dark:color.scale($primary,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$secondary-dark:$secondary;$success-dark:color.scale($success,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$info-dark:color.scale($info,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$warning-dark:color.scale($warning,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$danger-dark:color.scale($danger,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$light-dark:$light;$dark-dark:$dark;$theme-colors-dark:("primary":$primary-dark,"secondary":$secondary-dark,"success":$success-dark,"info":$info-dark,"warning":$warning-dark,"danger":$danger-dark,"light":$light-dark,"dark":$dark-dark);$primary-text-emphasis-dark:color.scale($primary-text-emphasis,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$secondary-text-emphasis-dark:$secondary-text-emphasis;$success-text-emphasis-dark:color.scale($success-text-emphasis,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$info-text-emphasis-dark:color.scale($info-text-emphasis,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$warning-text-emphasis-dark:color.scale($warning-text-emphasis,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$danger-text-emphasis-dark:color.scale($danger-text-emphasis,$saturation:-10%);// stylelint-disable-line scss/at-function-named-arguments$light-text-emphasis-dark:$gray-100-dark;$dark-text-emphasis-dark:$gray-300-dark;$primary-bg-subtle-dark:$primary-bg-subtle;$secondary-bg-subtle-dark:$secondary-bg-subtle;$success-bg-subtle-dark:$success-bg-subtle;$info-bg-subtle-dark:$info-bg-subtle;$warning-bg-subtle-dark:$warning-bg-subtle;$danger-bg-subtle-dark:$danger-bg-subtle;$light-bg-subtle-dark:$gray-800-dark;$dark-bg-subtle-dark:color.mix($gray-800-dark,$black);$primary-border-subtle-dark:$primary-border-subtle;$secondary-border-subtle-dark:$secondary-border-subtle;$success-border-subtle-dark:$success-border-subtle;$info-border-subtle-dark:$info-border-subtle;$warning-border-subtle-dark:$warning-border-subtle;$danger-border-subtle-dark:$danger-border-subtle;$light-border-subtle-dark:$gray-700-dark;$dark-border-subtle-dark:$gray-800-dark;// Gradients$primary-gradient-dark:("start":color.scale(#5856d6,$saturation:-10%),// stylelint-disable-line scss/at-function-named-arguments"stop":color.scale(#6f67db,$saturation:-10%)// stylelint-disable-line scss/at-function-named-arguments);$secondary-gradient-dark:("start":color.scale(#c8d2dc,$saturation:-10%),// stylelint-disable-line scss/at-function-named-arguments"stop":color.scale($white,$saturation:-10%)// stylelint-disable-line scss/at-function-named-arguments);$light-gradient-dark:("start":color.scale(#e3e8ed,$saturation:-10%),// stylelint-disable-line scss/at-function-named-arguments"stop":color.scale($white,$saturation:-10%)// stylelint-disable-line scss/at-function-named-arguments);$dark-gradient-dark:("start":color.scale(#3c4b64,$saturation:-10%),// stylelint-disable-line scss/at-function-named-arguments"stop":color.scale(#212333,$saturation:-10%)// stylelint-disable-line scss/at-function-named-arguments);$danger-gradient-dark:("start":color.scale(#e55353,$saturation:-10%),// stylelint-disable-line scss/at-function-named-arguments"stop":color.scale(#d93737,$saturation:-10%)// stylelint-disable-line scss/at-function-named-arguments);$warning-gradient-dark:("start":color.scale(#f9b115,$saturation:-10%),// stylelint-disable-line scss/at-function-named-arguments"stop":color.scale(#f6960b,$saturation:-10%)// stylelint-disable-line scss/at-function-named-arguments);$success-gradient-dark:("start":color.scale(#2eb85c,$saturation:-10%),// stylelint-disable-line scss/at-function-named-arguments"stop":color.scale(#1b9e3e,$saturation:-10%)// stylelint-disable-line scss/at-function-named-arguments);$info-gradient-dark:("start":color.scale(#39f,$saturation:-10%),// stylelint-disable-line scss/at-function-named-arguments"stop":color.scale(#2982cc,$saturation:-10%)// stylelint-disable-line scss/at-function-named-arguments);$theme-gradients-dark:("primary":$primary-gradient-dark,"secondary":$secondary-gradient-dark,"success":$success-gradient-dark,"info":$info-gradient-dark,"warning":$warning-gradient-dark,"danger":$danger-gradient-dark,"light":$light-gradient-dark,"dark":$dark-gradient-dark);$body-color-dark:rgba($white,.87);$body-bg-dark:$gray-900-dark;$body-secondary-color-dark:rgba($white,.6);$body-secondary-bg-dark:$gray-800-dark;$body-tertiary-color-dark:rgba($white,.38);$body-tertiary-bg-dark:color.mix($gray-800-dark,#212631,50%);$body-emphasis-color-dark:$white;$border-color-dark:$gray-800-dark;$border-color-translucent-dark:rgba($white,.1);$headings-color-dark:inherit;$link-color-dark:$primary-dark;$link-hover-color-dark:shift-color($link-color-dark,-$link-shade-percentage);$code-color-dark:tint-color($code-color,40%);$mark-color-dark:$body-color-dark;$mark-bg-dark:$yellow-800;$elevation-base-color-dark:0,0,0;//// Forms//$form-select-indicator-color-dark:$body-color-dark;$form-select-indicator-dark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");$form-switch-color-dark:rgba($white,.25);$form-switch-bg-image-dark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>");$form-valid-color-dark:$green-300;$form-valid-border-color-dark:$green-300;$form-invalid-color-dark:$red-300;$form-invalid-border-color-dark:$red-300;//// Accordion//$accordion-icon-color-dark:$body-color-dark;$accordion-icon-active-color-dark:$primary-text-emphasis-dark;$accordion-button-icon-dark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");$accordion-button-active-icon-dark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");//// Carousel//$carousel-indicator-active-bg-dark:$carousel-dark-indicator-active-bg;$carousel-caption-color-dark:$carousel-dark-caption-color;$carousel-control-icon-filter-dark:$carousel-dark-control-icon-filter;//// Close button//$btn-close-filter-dark:$btn-close-white-filter;Sass mixins
Styles for dark mode, and any custom color modes you create, can be scoped appropriately to thedata-coreui-theme attribute selector or media query with the customizablecolor-mode() mixin. See theSass usage section for more details.
@mixin color-mode($mode:light,$root:false){@if$color-mode-type=="media-query"{@if$root==true{@media(prefers-color-scheme:$mode){:root{@content;}}}@else{@media(prefers-color-scheme:$mode){@content;}}}@else{[data#{$data-infix}theme="#{$mode}"]{@content;}}}