Color modes

OUDS Web supports color modes, or themes. Explore our default light color mode and the dark mode.

Modes

Modes are a way to change the color of the text and the components inside. We provide 4 different modes that are "light", "dark", "root", and "root-inverted". The "light" and "dark" modes are static, while the "root" and "root-inverted" modes are dynamic.

Be careful when using the data-bs-theme attribute on an element carrying one of our .bg-* utilities, the background-color property will also be automatically changed to use the current defined color mode.

Static color modes

By default, we provide two static themes/modes that are "light" and "dark". These themes are named static because once you’ve set the theme on an element it won’t ever change whatever the main theme is. The "light" theme will set the text color to black and set the light variant for every components inside, while the "dark" theme will set the text color to white and set the dark variant for every components inside.

Text and components in here will always be in dark mode

Text and components in here will always be in light mode

<div class="bg-emphasized p-short">
  <div data-bs-theme="dark">
    <p>Text and components in here will always be in dark mode</p>
    <button class="btn btn-strong mb-short">Dark mode button</button>
    <div class="bg-status-accent-emphasized p-short">
      <div data-bs-theme="light">
        <p>Text and components in here will always be in light mode</p>
        <button class="btn btn-strong">Light mode button</button>
      </div>
    </div>
  </div>
</div>

html

`light` mode

Light mode is the default mode of the page, it allows you to write using black text color and light mode components. To get the light theme independently from the cascade, you can set via data-bs-theme="light" on any element. Feel free to change the color mode of the page to see the effect on the inside background example above.

`dark` mode

Dark mode allows you to write using light gray text color and dark mode components. To get the dark theme independently from the cascade, you can set via data-bs-theme="dark" on any element. Feel free to change the color mode of the page to see the effect on the outside background example above.

Dynamic color modes

We have two more dynamic themes that are "root" and "root-inverted". These themes are named dynamic because they depend on the main element mode, so by changing the main mode, you’re changing all those dynamic calls as well. The "root" theme will reset the color mode to the main theme of your page, while the "root-inverted" theme will reset the color mode to the opposite theme of your page.

Note that these themes aren’t meant to be used on the root element.

Text and components in here will always be inverted compared to the main mode

Text and components in here will always be reset to the main mode

<div class="bg-status-neutral-emphasized p-short">
  <div data-bs-theme="root-inverted">
    <p>Text and components in here will always be inverted compared to the main mode</p>
    <button class="btn btn-strong mb-short">Inverted mode button</button>
    <div class="bg-status-neutral-emphasized p-short">
      <div data-bs-theme="root">
        <p>Text and components in here will always be reset to the main mode</p>
        <button class="btn btn-strong">Main mode button</button>
      </div>
    </div>
  </div>
</div>

html

`root-inverted` mode

Here is an example of a block that inverts the main theme when it’s placed inside a dark block. To get the inverted main theme independently from the cascade, set via data-bs-theme="root-inverted" on any element but the main one. Feel free to change the color mode of the page to see the effect.

`root` mode

Here is an example of a block that follows the main theme when it’s placed inside a dark block. To get the main theme independently from the cascade, set via data-bs-theme="root" on any element but the main one. Feel free to change the color mode of the page to see the effect.

How to use

You should apply a [data-bs-theme] attribute whenever you need to change the text color and the component variants inside.

Here is a recap table of when to use which contextual theme. Prefer to use light and dark themes as much as possible to avoid unexpected rendering. The theme to use strongly depends on the context of use and there is no manner to automate it unfortunately.

However, these 4 themes should be enough to deal with all of your use cases. If it’s not the case, you are probably using them wrong. Since the implementation might be quite hard to understand, don’t hesitate to contact us via our GitHub discussions with a reduced test case if you’re having trouble implementing.

We use 2 different layers to set the background-color and the theme. Sometimes you won’t need to set the theme since it’ll be the same as the current one. Please check out our Background utilities to know more about this specific topic.

Wanted local text color inside main light mode	Wanted local text color inside main dark mode	Theme that should be used
Black	Black	`"light"`
White	White	`"dark"`
White	Black	`"root-inverted"`
Black	White	`"root"`

root theme should be used only in very specific occasions, most of the time it will cascade from the main theme.

Examples

Here are some examples of how to use the different data-bs-theme attribute on different use cases.

<div class="dropdown" data-bs-theme="light">
  <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
    Always light dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

<div class="dropdown" data-bs-theme="dark">
  <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
    Always dark dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

<div data-bs-theme="root-inverted" class="dropdown">
  <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonRootInverted" data-bs-toggle="dropdown" aria-expanded="false">
    Main inverted theme dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonRootInverted">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

<div data-bs-theme="root-inverted" class="dropdown">
  <button class="btn btn-dropdown dropdown-toggle" type="button" id="dropdownMenuButtonRoot" data-bs-toggle="dropdown" aria-expanded="false">
    Main inverted theme dropdown and main theme dropdown menu
  </button>
  <ul data-bs-theme="root" class="dropdown-menu" aria-labelledby="dropdownMenuButtonRoot">
    <li><a class="dropdown-item active" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Separated link</a></li>
  </ul>
</div>

html

How it works

As shown above, color mode styles are controlled by the data-bs-theme attribute. This attribute can be applied to the <html> element (using light or dark), or to any other element or OUDS Web 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.
root and root-inverted are some automated modes compared to the root mode.
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.scss stylesheet 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.scss to 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 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. Building on the quick start template:

<!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>OUDS Web demo</title>
    <link href="https://cdn.jsdelivr.net/npm/@ouds/web@0.3.0/dist/css/ouds-web.min.css" rel="stylesheet" integrity="sha384-CzQuGk+NJ/bSe+JTXsWNfzsvNepYeg8RXGgqWaSuW/3uS6p18cMG6OfNoFk3l6Du" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/@ouds/web@0.3.0/dist/js/ouds-web.bundle.min.js" integrity="sha384-KGDz5Efd1+I+DEqyXUVenXr307SAvyxvCRWYATXT2OYeEDizNwaUBjrcbDeSq88C" crossorigin="anonymous"></script>
  </body>
</html>

OUDS Web do ship with a built-in color mode picker, you can use the one from our own documentation. Learn more in the JavaScript section.

Building with Sass

Our dark mode option is available to use for all users of OUDS Web, 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 to false.

Change default behavior

We use a custom Sass mixin, color-mode(), to help you control how color modes are applied. By default, we use a data 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(--bs-color-content-on-status-muted);
    background-color: var(--bs-color-surface-status-info-muted);
  }
}

Outputs to:

[data-bs-theme=dark] .element {
  color: var(--bs-color-content-on-status-muted);
  background-color: var(--bs-color-surface-status-info-muted);
}

And when setting to media-query:

$color-mode-type: media-query;

@include color-mode(dark) {
  .element {
    color: var(--bs-color-content-on-status-muted);
    background-color: var(--bs-color-surface-status-info-muted);
  }
}

Outputs to:

@media (prefers-color-scheme: dark) {
  .element {
    color: var(--bs-color-content-on-status-muted);
    background-color: var(--bs-color-surface-status-info-muted);
  }
}

Change the root selector

You can also change the root selector from where the theme variables are set. By default, it’s set to :root, but you can change it to any other selector. This is useful if you want to apply the theme to another element, for instance in Angular where you can’t access easily the <html> element.

$ouds-root-selector: "#app";

@include "@ouds/web";

Outputs to:

#app,
[data-bs-theme="light"],
#app[data-bs-theme="light"] [data-bs-theme="root"],
#app[data-bs-theme="dark"] [data-bs-theme="root-inverted"] {
  /* Your light mode variables definition */
}

[data-bs-theme="dark"],
#app[data-bs-theme="dark"] [data-bs-theme="root"],
#app[data-bs-theme="light"] [data-bs-theme="root-inverted"] {
  /* Your dark mode variables definition */
}

/* Further OUDS Web CSS */

JavaScript

To allow visitors or users to toggle color modes, you’ll need to create a toggle element to control the data-bs-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 Bootstrap's docs (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under the Creative Commons Attribution 3.0 Unported License.
 */

(() => {
  'use strict'

  const getStoredTheme = () => localStorage.getItem('theme')
  const setStoredTheme = theme => localStorage.setItem('theme', theme)

  const getPreferredTheme = () => {
    const storedTheme = getStoredTheme()
    if (storedTheme) {
      return storedTheme
    }

    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
  }

  const setTheme = theme => {
    if (theme === 'auto') {
      document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
    } else {
      document.documentElement.setAttribute('data-bs-theme', theme)
    }
  }

  setTheme(getPreferredTheme())

  const showActiveTheme = (theme, focus = false) => {
    const themeSwitcher = document.querySelector('#bd-theme')

    if (!themeSwitcher) {
      return
    }

    const themeSwitcherText = document.querySelector('#bd-theme-text')
    const activeThemeIcon = document.querySelector('.theme-icon-active use')
    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')

    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
      element.classList.remove('active')
      element.setAttribute('aria-pressed', 'false')
    })

    btnToActive.classList.add('active')
    btnToActive.setAttribute('aria-pressed', 'true')
    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)

    if (focus) {
      themeSwitcher.focus()
    }
  }

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    const storedTheme = getStoredTheme()
    if (storedTheme !== 'light' && storedTheme !== 'dark') {
      setTheme(getPreferredTheme())
    }
  })

  window.addEventListener('DOMContentLoaded', () => {
    showActiveTheme(getPreferredTheme())

    document.querySelectorAll('[data-bs-theme-value]')
      .forEach(toggle => {
        toggle.addEventListener('click', () => {
          const theme = toggle.getAttribute('data-bs-theme-value')
          setStoredTheme(theme)
          setTheme(theme)
          showActiveTheme(theme, true)
        })
      })
  })
})()

CSS

Sass tokens

Raw tokens

Colors raw tokens as Sass variables. Not to be used as-is.

scss/tokens/_raw.scss

// $ouds-color-decorative-amber-100: #fff0cc;
// $ouds-color-decorative-amber-200: #ffe199;
// $ouds-color-decorative-amber-300: #ffd266;
// $ouds-color-decorative-amber-400: #ffc333;
$ouds-color-decorative-amber-500: #ffb400;
// $ouds-color-decorative-amber-600: #cc9000;
// $ouds-color-decorative-amber-700: #996c00;
// $ouds-color-decorative-amber-800: #664800;
// $ouds-color-decorative-amber-900: #332400;
$ouds-color-decorative-amethyst-100: #f1ecf9;
$ouds-color-decorative-amethyst-200: #e0d4f2;
$ouds-color-decorative-amethyst-300: #c5ade6;
$ouds-color-decorative-amethyst-400: #a885d8;
$ouds-color-decorative-amethyst-500: #8d60cd;
$ouds-color-decorative-amethyst-600: #5b2f98;
$ouds-color-decorative-amethyst-700: #432371;
$ouds-color-decorative-amethyst-800: #2c174a;
$ouds-color-decorative-amethyst-900: #150b23;
$ouds-color-decorative-deep-peach-100: #fbebdf;
$ouds-color-decorative-deep-peach-200: #f4cfb2;
$ouds-color-decorative-deep-peach-300: #e3b591;
$ouds-color-decorative-deep-peach-400: #c19372;
$ouds-color-decorative-deep-peach-500: #cf7e3f;
$ouds-color-decorative-deep-peach-600: #aa6631;
$ouds-color-decorative-deep-peach-700: #7e4f2a;
$ouds-color-decorative-deep-peach-800: #553720;
$ouds-color-decorative-deep-peach-900: #2e2014;
$ouds-color-decorative-emerald-100: #e5f5ed;
$ouds-color-decorative-emerald-200: #c0e8d4;
$ouds-color-decorative-emerald-300: #9bdaba;
$ouds-color-decorative-emerald-400: #75cca1;
$ouds-color-decorative-emerald-500: #50be87;
$ouds-color-decorative-emerald-600: #3ba06e;
$ouds-color-decorative-emerald-700: #2e7b54;
$ouds-color-decorative-emerald-800: #20563b;
$ouds-color-decorative-emerald-900: #123021;
$ouds-color-decorative-shocking-pink-100: #ffe5f6;
$ouds-color-decorative-shocking-pink-200: #ffb4e6;
$ouds-color-decorative-shocking-pink-300: #ff80d4;
$ouds-color-decorative-shocking-pink-400: #ff4dc3;
$ouds-color-decorative-shocking-pink-500: #ff1ab2;
$ouds-color-decorative-shocking-pink-600: #e50099;
$ouds-color-decorative-shocking-pink-700: #b20077;
$ouds-color-decorative-shocking-pink-800: #800055;
$ouds-color-decorative-shocking-pink-900: #4d0033;
$ouds-color-decorative-sky-100: #d2ecf9;
$ouds-color-decorative-sky-200: #a5daf3;
$ouds-color-decorative-sky-300: #79c7ec;
$ouds-color-decorative-sky-400: #4ab4e6;
$ouds-color-decorative-sky-500: #1fa2e0;
$ouds-color-decorative-sky-600: #1982b3;
$ouds-color-decorative-sky-700: #136186;
$ouds-color-decorative-sky-800: #0c415a;
$ouds-color-decorative-sky-900: #06202d;
$ouds-color-functional-black: #000;
// $ouds-color-functional-dark-gray-80: #7a7a7a;
// $ouds-color-functional-dark-gray-160: #707070;
$ouds-color-functional-dark-gray-240: #666;
$ouds-color-functional-dark-gray-320: #5c5c5c;
$ouds-color-functional-dark-gray-400: #555;
// $ouds-color-functional-dark-gray-480: #444;
// $ouds-color-functional-dark-gray-560: #3d3d3d;
$ouds-color-functional-dark-gray-640: #333;
$ouds-color-functional-dark-gray-720: #272727;
$ouds-color-functional-dark-gray-800: #1f1f1f;
$ouds-color-functional-dark-gray-880: #141414;
// $ouds-color-functional-dark-gray-960: #0a0a0a;
$ouds-color-functional-dodger-blue-100: #f0faff;
$ouds-color-functional-dodger-blue-200: #bde7ff;
$ouds-color-functional-dodger-blue-300: #8ad5ff;
$ouds-color-functional-dodger-blue-400: #57c3ff;
$ouds-color-functional-dodger-blue-500: #26b2ff;
$ouds-color-functional-dodger-blue-600: #009bf0;
$ouds-color-functional-dodger-blue-700: #007abd;
$ouds-color-functional-dodger-blue-800: #00598a;
$ouds-color-functional-dodger-blue-900: #003857;
$ouds-color-functional-light-gray-80: #f4f4f4;
$ouds-color-functional-light-gray-160: #eee;
$ouds-color-functional-light-gray-240: #e0e0e0;
$ouds-color-functional-light-gray-320: #d6d6d6;
$ouds-color-functional-light-gray-400: #ccc;
// $ouds-color-functional-light-gray-480: #c2c2c2;
// $ouds-color-functional-light-gray-560: #bbb;
// $ouds-color-functional-light-gray-640: #adadad;
// $ouds-color-functional-light-gray-720: #a3a3a3;
$ouds-color-functional-light-gray-800: #999;
// $ouds-color-functional-light-gray-880: #8f8f8f;
$ouds-color-functional-light-gray-960: #858585;
$ouds-color-functional-malachite-100: #edfcf0;
$ouds-color-functional-malachite-200: #c1f6ca;
$ouds-color-functional-malachite-300: #94f0a4;
$ouds-color-functional-malachite-400: #67e97e;
$ouds-color-functional-malachite-500: #3de35a;
$ouds-color-functional-malachite-600: #1ecd3c;
$ouds-color-functional-malachite-700: #17a02f;
$ouds-color-functional-malachite-800: #0e621d;
$ouds-color-functional-malachite-900: #0a4715;
$ouds-color-functional-scarlet-100: #ffe5e6;
$ouds-color-functional-scarlet-200: #ffb2b3;
$ouds-color-functional-scarlet-300: #ff8081;
$ouds-color-functional-scarlet-400: #ff4d4e;
$ouds-color-functional-scarlet-500: #ff1a1b;
$ouds-color-functional-scarlet-600: #db0002;
$ouds-color-functional-scarlet-700: #b20002;
$ouds-color-functional-scarlet-800: #800001;
$ouds-color-functional-scarlet-900: #4d0001;
$ouds-color-functional-sun-100: #fff7d6;
$ouds-color-functional-sun-200: #ffed99;
$ouds-color-functional-sun-300: #ffe270;
$ouds-color-functional-sun-400: #ffd73d;
$ouds-color-functional-sun-500: #ffd000;
$ouds-color-functional-sun-600: #d6aa00;
$ouds-color-functional-sun-700: #a38200;
$ouds-color-functional-sun-800: #665100;
$ouds-color-functional-sun-900: #3d3100;
$ouds-color-functional-white: #fff;
$ouds-color-opacity-black-0: rgba(0, 0, 0, 0);
$ouds-color-opacity-black-40: rgba(0, 0, 0, .04);
$ouds-color-opacity-black-80: rgba(0, 0, 0, .08);
// $ouds-color-opacity-black-120: rgba(0, 0, 0, .12);
$ouds-color-opacity-black-160: rgba(0, 0, 0, .16);
$ouds-color-opacity-black-200: rgba(0, 0, 0, .2);
$ouds-color-opacity-black-240: rgba(0, 0, 0, .24);
$ouds-color-opacity-black-280: rgba(0, 0, 0, .28);
$ouds-color-opacity-black-320: rgba(0, 0, 0, .32);
// $ouds-color-opacity-black-360: rgba(0, 0, 0, .36);
// $ouds-color-opacity-black-400: rgba(0, 0, 0, .4);
$ouds-color-opacity-black-440: rgba(0, 0, 0, .44);
// $ouds-color-opacity-black-480: rgba(0, 0, 0, .48);
$ouds-color-opacity-black-520: rgba(0, 0, 0, .52);
// $ouds-color-opacity-black-560: rgba(0, 0, 0, .56);
// $ouds-color-opacity-black-600: rgba(0, 0, 0, .6);
// $ouds-color-opacity-black-640: rgba(0, 0, 0, .64);
$ouds-color-opacity-black-680: rgba(0, 0, 0, .68);
// $ouds-color-opacity-black-720: rgba(0, 0, 0, .72);
// $ouds-color-opacity-black-760: rgba(0, 0, 0, .76);
// $ouds-color-opacity-black-800: rgba(0, 0, 0, .8);
$ouds-color-opacity-black-840: rgba(0, 0, 0, .84);
// $ouds-color-opacity-black-880: rgba(0, 0, 0, .88);
// $ouds-color-opacity-black-920: rgba(0, 0, 0, .92);
// $ouds-color-opacity-black-960: rgba(0, 0, 0, .96);
$ouds-color-opacity-dodger-blue: rgba(38, 178, 255, .08);
$ouds-color-opacity-malachite: rgba(61, 227, 90, .12);
$ouds-color-opacity-scarlet: rgba(234, 3, 5, .08);
$ouds-color-opacity-sun: rgba(255, 208, 0, .16);
$ouds-color-opacity-white-0: rgba(255, 255, 255, 0);
$ouds-color-opacity-white-40: rgba(255, 255, 255, .04);
$ouds-color-opacity-white-80: rgba(255, 255, 255, .08);
// $ouds-color-opacity-white-120: rgba(255, 255, 255, .12);
// $ouds-color-opacity-white-160: rgba(255, 255, 255, .16);
$ouds-color-opacity-white-200: rgba(255, 255, 255, .2);
// $ouds-color-opacity-white-240: rgba(255, 255, 255, .24);
// $ouds-color-opacity-white-280: rgba(255, 255, 255, .28);
// $ouds-color-opacity-white-320: rgba(255, 255, 255, .32);
// $ouds-color-opacity-white-360: rgba(255, 255, 255, .36);
// $ouds-color-opacity-white-400: rgba(255, 255, 255, .4);
// $ouds-color-opacity-white-440: rgba(255, 255, 255, .44);
// $ouds-color-opacity-white-480: rgba(255, 255, 255, .48);
// $ouds-color-opacity-white-520: rgba(255, 255, 255, .52);
// $ouds-color-opacity-white-560: rgba(255, 255, 255, .56);
// $ouds-color-opacity-white-600: rgba(255, 255, 255, .6);
$ouds-color-opacity-white-640: rgba(255, 255, 255, .64);
// $ouds-color-opacity-white-680: rgba(255, 255, 255, .68);
// $ouds-color-opacity-white-720: rgba(255, 255, 255, .72);
// $ouds-color-opacity-white-760: rgba(255, 255, 255, .76);
$ouds-color-opacity-white-800: rgba(255, 255, 255, .8);
// $ouds-color-opacity-white-840: rgba(255, 255, 255, .84);
// $ouds-color-opacity-white-880: rgba(255, 255, 255, .88);
$ouds-color-opacity-white-920: rgba(255, 255, 255, .92);
// $ouds-color-opacity-white-960: rgba(255, 255, 255, .96);
// $ouds-color-orange-50: #fff2e6;
$ouds-color-orange-100: #ffd5b0;
$ouds-color-orange-200: #ffc18a;
$ouds-color-orange-300: #ffa554;
$ouds-color-orange-400: #ff9433;
$ouds-color-orange-500: #ff7900;
$ouds-color-orange-550: #f15e00;
$ouds-color-orange-600: #e86e00;
$ouds-color-orange-700: #b55600;
$ouds-color-orange-800: #8c4300;
$ouds-color-orange-900: #6b3300;
$ouds-color-warm-gray-100: #f9f5f0;
// $ouds-color-warm-gray-200: #e9ddce;
// $ouds-color-warm-gray-300: #d6c4ae;
// $ouds-color-warm-gray-400: #c1ab90;
// $ouds-color-warm-gray-500: #a99275;
// $ouds-color-warm-gray-600: #8a7860;
// $ouds-color-warm-gray-700: #685d50;
// $ouds-color-warm-gray-800: #48433d;
$ouds-color-warm-gray-900: #353228;

Semantic tokens

Color semantic tokens as Sass variables. Should not be used as-is. Prefer use our CSS semantic tokens.

scss/tokens/_semantic.scss

$ouds-color-opacity-lower-light: $ouds-color-opacity-black-80;
$ouds-color-opacity-lowest-light: $ouds-color-opacity-black-40;
$ouds-color-opacity-transparent-light: $ouds-color-opacity-black-0;
$ouds-color-opacity-lower-dark: $ouds-color-opacity-white-80;
$ouds-color-opacity-lowest-dark: $ouds-color-opacity-white-40;
$ouds-color-opacity-transparent-dark: $ouds-color-opacity-white-0;
$ouds-color-action-disabled-light: $ouds-color-opacity-black-200;
$ouds-color-action-enabled-light: $ouds-color-functional-black;
$ouds-color-action-focus-light: $ouds-color-opacity-black-680;
$ouds-color-action-highlighted-light: $ouds-color-functional-black;
$ouds-color-action-hover-light: $ouds-color-opacity-black-680;
$ouds-color-action-loading-light: $ouds-color-orange-550;
$ouds-color-action-negative-enabled-light: $ouds-color-functional-scarlet-600;
$ouds-color-action-negative-focus-light: $ouds-color-functional-scarlet-700;
$ouds-color-action-negative-hover-light: $ouds-color-functional-scarlet-700;
$ouds-color-action-negative-loading-light: $ouds-color-functional-scarlet-800;
$ouds-color-action-negative-pressed-light: $ouds-color-functional-scarlet-800;
$ouds-color-action-negative-enabled-dark: $ouds-color-functional-scarlet-300;
$ouds-color-action-negative-focus-dark: $ouds-color-functional-scarlet-200;
$ouds-color-action-negative-hover-dark: $ouds-color-functional-scarlet-200;
$ouds-color-action-negative-loading-dark: $ouds-color-functional-scarlet-100;
$ouds-color-action-negative-pressed-dark: $ouds-color-functional-scarlet-100;
$ouds-color-action-pressed-light: $ouds-color-orange-550;
$ouds-color-action-selected-light: $ouds-color-orange-550;
$ouds-color-action-support-enabled-light: $ouds-color-opacity-black-40;
$ouds-color-action-support-focus-light: $ouds-color-opacity-black-80;
$ouds-color-action-support-hover-light: $ouds-color-opacity-black-80;
$ouds-color-action-support-loading-light: $ouds-color-opacity-black-80;
$ouds-color-action-support-pressed-light: $ouds-color-opacity-black-80;
$ouds-color-action-support-enabled-dark: $ouds-color-opacity-white-40;
$ouds-color-action-support-focus-dark: $ouds-color-opacity-white-80;
$ouds-color-action-support-hover-dark: $ouds-color-opacity-white-80;
$ouds-color-action-support-loading-dark: $ouds-color-opacity-white-80;
$ouds-color-action-support-pressed-dark: $ouds-color-opacity-white-80;
$ouds-color-action-visited-light: $ouds-color-decorative-amethyst-600;
$ouds-color-action-disabled-dark: $ouds-color-opacity-white-200;
$ouds-color-action-enabled-dark: $ouds-color-functional-light-gray-160;
$ouds-color-action-focus-dark: $ouds-color-opacity-white-640;
$ouds-color-action-highlighted-dark: $ouds-color-functional-light-gray-160;
$ouds-color-action-hover-dark: $ouds-color-opacity-white-640;
$ouds-color-action-loading-dark: $ouds-color-orange-500;
$ouds-color-action-pressed-dark: $ouds-color-orange-500;
$ouds-color-action-selected-dark: $ouds-color-orange-500;
$ouds-color-action-visited-dark: $ouds-color-decorative-amethyst-400;
$ouds-color-always-black-light: $ouds-color-functional-black;
$ouds-color-always-on-black-light: $ouds-color-functional-light-gray-160;
$ouds-color-always-on-white-light: $ouds-color-functional-black;
$ouds-color-always-white-light: $ouds-color-functional-white;
$ouds-color-always-black-dark: $ouds-color-functional-black;
$ouds-color-always-on-black-dark: $ouds-color-functional-light-gray-160;
$ouds-color-always-on-white-dark: $ouds-color-functional-black;
$ouds-color-always-white-dark: $ouds-color-functional-white;
$ouds-color-bg-emphasized-light: $ouds-color-functional-dark-gray-880;
$ouds-color-bg-primary-light: $ouds-color-functional-white;
$ouds-color-bg-secondary-light: $ouds-color-functional-light-gray-80;
$ouds-color-bg-tertiary-light: $ouds-color-warm-gray-100;
$ouds-color-bg-emphasized-dark: $ouds-color-functional-dark-gray-640;
$ouds-color-bg-primary-dark: $ouds-color-functional-dark-gray-880;
$ouds-color-bg-secondary-dark: $ouds-color-functional-dark-gray-800;
$ouds-color-bg-tertiary-dark: $ouds-color-warm-gray-900;
$ouds-color-border-brand-primary-light: $ouds-color-orange-550;
$ouds-color-border-default-light: $ouds-color-opacity-black-200;
$ouds-color-border-emphasized-light: $ouds-color-functional-black;
$ouds-color-border-focus-light: $ouds-color-functional-black;
$ouds-color-border-focus-inset-light: $ouds-color-functional-white;
$ouds-color-border-muted-light: $ouds-color-opacity-black-80;
$ouds-color-border-on-brand-primary-light: $ouds-color-functional-black;
$ouds-color-border-on-brand-primary-dark: $ouds-color-functional-black;
$ouds-color-border-brand-primary-dark: $ouds-color-orange-500;
$ouds-color-border-default-dark: $ouds-color-opacity-white-200;
$ouds-color-border-emphasized-dark: $ouds-color-opacity-white-920;
$ouds-color-border-focus-dark: $ouds-color-functional-light-gray-160;
$ouds-color-border-focus-inset-dark: $ouds-color-functional-dark-gray-880;
$ouds-color-border-muted-dark: $ouds-color-opacity-white-80;
$ouds-color-content-brand-primary-light: $ouds-color-orange-550;
$ouds-color-content-default-light: $ouds-color-functional-black;
$ouds-color-content-disabled-light: $ouds-color-opacity-black-200;
$ouds-color-content-muted-light: $ouds-color-opacity-black-680;
$ouds-color-content-on-action-disabled-light: $ouds-color-functional-white;
$ouds-color-content-on-action-enabled-light: $ouds-color-functional-white;
$ouds-color-content-on-action-focus-light: $ouds-color-functional-white;
$ouds-color-content-on-action-highlighted-light: $ouds-color-functional-white;
$ouds-color-content-on-action-hover-light: $ouds-color-functional-white;
$ouds-color-content-on-action-loading-light: $ouds-color-functional-white;
$ouds-color-content-on-action-pressed-light: $ouds-color-functional-white;
$ouds-color-content-on-action-disabled-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-enabled-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-focus-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-highlighted-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-hover-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-loading-dark: $ouds-color-functional-black;
$ouds-color-content-on-action-pressed-dark: $ouds-color-functional-black;
$ouds-color-content-on-brand-primary-light: $ouds-color-functional-black;
$ouds-color-content-on-brand-primary-dark: $ouds-color-functional-black;
$ouds-color-content-on-overlay-emphasized-light: $ouds-color-functional-white;
$ouds-color-content-on-overlay-emphasized-dark: $ouds-color-functional-black;
$ouds-color-content-on-status-emphasized-light: $ouds-color-functional-black;
$ouds-color-content-on-status-emphasized-alt-light: $ouds-color-functional-white;
$ouds-color-content-on-status-muted-light: $ouds-color-functional-black;
$ouds-color-content-on-status-emphasized-dark: $ouds-color-functional-black;
$ouds-color-content-on-status-emphasized-alt-dark: $ouds-color-functional-black;
$ouds-color-content-on-status-muted-dark: $ouds-color-functional-light-gray-160;
$ouds-color-content-status-info-light: $ouds-color-functional-dodger-blue-500;
$ouds-color-content-status-negative-light: $ouds-color-functional-scarlet-600;
$ouds-color-content-status-positive-light: $ouds-color-functional-malachite-500;
$ouds-color-content-status-warning-light: $ouds-color-functional-sun-500;
$ouds-color-content-status-info-dark: $ouds-color-functional-dodger-blue-500;
$ouds-color-content-status-negative-dark: $ouds-color-functional-scarlet-600;
$ouds-color-content-status-positive-dark: $ouds-color-functional-malachite-500;
$ouds-color-content-status-warning-dark: $ouds-color-functional-sun-500;
$ouds-color-content-brand-primary-dark: $ouds-color-orange-500;
$ouds-color-content-default-dark: $ouds-color-functional-light-gray-160;
$ouds-color-content-disabled-dark: $ouds-color-opacity-white-200;
$ouds-color-content-muted-dark: $ouds-color-opacity-white-640;
$ouds-color-overlay-default-light: $ouds-color-functional-white;
$ouds-color-overlay-drag-light: $ouds-color-opacity-black-40;
$ouds-color-overlay-emphasized-light: $ouds-color-functional-dark-gray-720;
$ouds-color-overlay-modal-light: $ouds-color-functional-white;
$ouds-color-overlay-default-dark: $ouds-color-opacity-white-80;
$ouds-color-overlay-drag-dark: $ouds-color-opacity-white-200;
$ouds-color-overlay-emphasized-dark: $ouds-color-functional-light-gray-160;
$ouds-color-overlay-modal-dark: $ouds-color-functional-dark-gray-640;
$ouds-color-surface-brand-primary-light: $ouds-color-orange-500;
$ouds-color-surface-brand-primary-dark: $ouds-color-orange-500;
$ouds-color-surface-status-accent-emphasized-light: $ouds-color-functional-sun-500;
$ouds-color-surface-status-accent-muted-light: $ouds-color-opacity-sun;
$ouds-color-surface-status-accent-emphasized-dark: $ouds-color-functional-sun-300;
$ouds-color-surface-status-accent-muted-dark: $ouds-color-warm-gray-900;
$ouds-color-surface-status-info-emphasized-light: $ouds-color-functional-dodger-blue-500;
$ouds-color-surface-status-info-muted-light: $ouds-color-opacity-dodger-blue;
$ouds-color-surface-status-info-emphasized-dark: $ouds-color-functional-dodger-blue-300;
$ouds-color-surface-status-info-muted-dark: $ouds-color-functional-dodger-blue-900;
$ouds-color-surface-status-negative-emphasized-light: $ouds-color-functional-scarlet-600;
$ouds-color-surface-status-negative-muted-light: $ouds-color-opacity-scarlet;
$ouds-color-surface-status-negative-emphasized-dark: $ouds-color-functional-scarlet-300;
$ouds-color-surface-status-negative-muted-dark: $ouds-color-functional-scarlet-900;
$ouds-color-surface-status-neutral-emphasized-light: $ouds-color-opacity-black-840;
$ouds-color-surface-status-neutral-muted-light: $ouds-color-opacity-black-40;
$ouds-color-surface-status-neutral-emphasized-dark: $ouds-color-opacity-white-800;
$ouds-color-surface-status-neutral-muted-dark: $ouds-color-opacity-white-80;
$ouds-color-surface-status-positive-emphasized-light: $ouds-color-functional-malachite-500;
$ouds-color-surface-status-positive-muted-light: $ouds-color-opacity-malachite;
$ouds-color-surface-status-positive-emphasized-dark: $ouds-color-functional-malachite-300;
$ouds-color-surface-status-positive-muted-dark: $ouds-color-functional-malachite-900;
$ouds-color-surface-status-warning-emphasized-light: $ouds-color-functional-sun-500;
$ouds-color-surface-status-warning-muted-light: $ouds-color-opacity-sun;
$ouds-color-surface-status-warning-emphasized-dark: $ouds-color-functional-sun-300;
$ouds-color-surface-status-warning-muted-dark: $ouds-color-functional-sun-900;
$ouds-color-decorative-accent-1-default-light: $ouds-color-decorative-emerald-500;
$ouds-color-decorative-accent-1-emphasized-light: $ouds-color-decorative-emerald-700;
$ouds-color-decorative-accent-1-muted-light: $ouds-color-decorative-emerald-200;
$ouds-color-decorative-accent-1-default-dark: $ouds-color-decorative-emerald-500;
$ouds-color-decorative-accent-1-emphasized-dark: $ouds-color-decorative-emerald-700;
$ouds-color-decorative-accent-1-muted-dark: $ouds-color-decorative-emerald-200;
$ouds-color-decorative-accent-2-default-light: $ouds-color-decorative-sky-400;
$ouds-color-decorative-accent-2-emphasized-light: $ouds-color-decorative-sky-700;
$ouds-color-decorative-accent-2-muted-light: $ouds-color-decorative-sky-200;
$ouds-color-decorative-accent-2-default-dark: $ouds-color-decorative-sky-400;
$ouds-color-decorative-accent-2-emphasized-dark: $ouds-color-decorative-sky-700;
$ouds-color-decorative-accent-2-muted-dark: $ouds-color-decorative-sky-200;
$ouds-color-decorative-accent-3-default-light: $ouds-color-functional-sun-500;
$ouds-color-decorative-accent-3-emphasized-light: $ouds-color-decorative-amber-500;
$ouds-color-decorative-accent-3-muted-light: $ouds-color-functional-sun-200;
$ouds-color-decorative-accent-3-default-dark: $ouds-color-functional-sun-500;
$ouds-color-decorative-accent-3-emphasized-dark: $ouds-color-decorative-amber-500;
$ouds-color-decorative-accent-3-muted-dark: $ouds-color-functional-sun-200;
$ouds-color-decorative-accent-4-default-light: $ouds-color-decorative-amethyst-400;
$ouds-color-decorative-accent-4-emphasized-light: $ouds-color-decorative-amethyst-800;
$ouds-color-decorative-accent-4-muted-light: $ouds-color-decorative-amethyst-200;
$ouds-color-decorative-accent-4-default-dark: $ouds-color-decorative-amethyst-400;
$ouds-color-decorative-accent-4-emphasized-dark: $ouds-color-decorative-amethyst-800;
$ouds-color-decorative-accent-4-muted-dark: $ouds-color-decorative-amethyst-200;
$ouds-color-decorative-accent-5-default-light: $ouds-color-decorative-shocking-pink-200;
$ouds-color-decorative-accent-5-emphasized-light: $ouds-color-decorative-shocking-pink-300;
$ouds-color-decorative-accent-5-muted-light: $ouds-color-decorative-shocking-pink-100;
$ouds-color-decorative-accent-5-default-dark: $ouds-color-decorative-shocking-pink-200;
$ouds-color-decorative-accent-5-emphasized-dark: $ouds-color-decorative-shocking-pink-300;
$ouds-color-decorative-accent-5-muted-dark: $ouds-color-decorative-shocking-pink-100;
$ouds-color-decorative-brand-primary-light: $ouds-color-orange-500;
$ouds-color-decorative-brand-secondary-light: $ouds-color-functional-black;
$ouds-color-decorative-brand-tertiary-light: $ouds-color-functional-white;
$ouds-color-decorative-brand-primary-dark: $ouds-color-orange-500;
$ouds-color-decorative-brand-secondary-dark: $ouds-color-functional-black;
$ouds-color-decorative-brand-tertiary-dark: $ouds-color-functional-white;
$ouds-color-decorative-neutral-emphasized-higher-light: $ouds-color-functional-dark-gray-640;
$ouds-color-decorative-neutral-emphasized-low-light: $ouds-color-functional-dark-gray-400;
$ouds-color-decorative-neutral-emphasized-lower-light: $ouds-color-functional-dark-gray-320;
$ouds-color-decorative-neutral-emphasized-lowest-light: $ouds-color-functional-dark-gray-240;
$ouds-color-decorative-neutral-emphasized-higher-dark: $ouds-color-functional-dark-gray-640;
$ouds-color-decorative-neutral-emphasized-low-dark: $ouds-color-functional-dark-gray-400;
$ouds-color-decorative-neutral-emphasized-lower-dark: $ouds-color-functional-dark-gray-320;
$ouds-color-decorative-neutral-emphasized-lowest-dark: $ouds-color-functional-dark-gray-240;
$ouds-color-decorative-neutral-muted-high-light: $ouds-color-functional-light-gray-400;
$ouds-color-decorative-neutral-muted-higher-light: $ouds-color-functional-light-gray-800;
$ouds-color-decorative-neutral-muted-highest-light: $ouds-color-functional-light-gray-960;
$ouds-color-decorative-neutral-muted-low-light: $ouds-color-functional-light-gray-240;
$ouds-color-decorative-neutral-muted-lower-light: $ouds-color-functional-light-gray-160;
$ouds-color-decorative-neutral-muted-lowest-light: $ouds-color-functional-light-gray-80;
$ouds-color-decorative-neutral-muted-medium-light: $ouds-color-functional-light-gray-320;
$ouds-color-decorative-neutral-muted-high-dark: $ouds-color-functional-light-gray-400;
$ouds-color-decorative-neutral-muted-higher-dark: $ouds-color-functional-light-gray-800;
$ouds-color-decorative-neutral-muted-highest-dark: $ouds-color-functional-light-gray-960;
$ouds-color-decorative-neutral-muted-low-dark: $ouds-color-functional-light-gray-240;
$ouds-color-decorative-neutral-muted-lower-dark: $ouds-color-functional-light-gray-160;
$ouds-color-decorative-neutral-muted-lowest-dark: $ouds-color-functional-light-gray-80;
$ouds-color-decorative-neutral-muted-medium-dark: $ouds-color-functional-light-gray-320;
$ouds-color-decorative-skin-tint-100-light: $ouds-color-decorative-deep-peach-100;
$ouds-color-decorative-skin-tint-200-light: $ouds-color-decorative-deep-peach-200;
$ouds-color-decorative-skin-tint-300-light: $ouds-color-decorative-deep-peach-300;
$ouds-color-decorative-skin-tint-400-light: $ouds-color-decorative-deep-peach-400;
$ouds-color-decorative-skin-tint-500-light: $ouds-color-decorative-deep-peach-500;
$ouds-color-decorative-skin-tint-600-light: $ouds-color-decorative-deep-peach-600;
$ouds-color-decorative-skin-tint-700-light: $ouds-color-decorative-deep-peach-700;
$ouds-color-decorative-skin-tint-800-light: $ouds-color-decorative-deep-peach-800;
$ouds-color-decorative-skin-tint-900-light: $ouds-color-decorative-deep-peach-900;
$ouds-color-decorative-skin-tint-100-dark: $ouds-color-decorative-deep-peach-100;
$ouds-color-decorative-skin-tint-200-dark: $ouds-color-decorative-deep-peach-200;
$ouds-color-decorative-skin-tint-300-dark: $ouds-color-decorative-deep-peach-300;
$ouds-color-decorative-skin-tint-400-dark: $ouds-color-decorative-deep-peach-400;
$ouds-color-decorative-skin-tint-500-dark: $ouds-color-decorative-deep-peach-500;
$ouds-color-decorative-skin-tint-600-dark: $ouds-color-decorative-deep-peach-600;
$ouds-color-decorative-skin-tint-700-dark: $ouds-color-decorative-deep-peach-700;
$ouds-color-decorative-skin-tint-800-dark: $ouds-color-decorative-deep-peach-800;
$ouds-color-decorative-skin-tint-900-dark: $ouds-color-decorative-deep-peach-900;

Variables

We have our OUDS semantic CSS variables, which transform over light and dark modes. These are the variables you’ll use in your own custom CSS to style components and elements.

scss/tokens/_semantic-colors-custom-props.scss

@include color-mode(light, true) {
  --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-light};
  --#{$prefix}color-action-enabled: #{$ouds-color-action-enabled-light};
  --#{$prefix}color-action-focus: #{$ouds-color-action-focus-light};
  --#{$prefix}color-action-highlighted: #{$ouds-color-action-highlighted-light};
  --#{$prefix}color-action-hover: #{$ouds-color-action-hover-light};
  --#{$prefix}color-action-loading: #{$ouds-color-action-loading-light};
  --#{$prefix}color-action-negative-enabled: #{$ouds-color-action-negative-enabled-light};
  --#{$prefix}color-action-negative-focus: #{$ouds-color-action-negative-focus-light};
  --#{$prefix}color-action-negative-hover: #{$ouds-color-action-negative-hover-light};
  --#{$prefix}color-action-negative-loading: #{$ouds-color-action-negative-loading-light};
  --#{$prefix}color-action-negative-pressed: #{$ouds-color-action-negative-pressed-light};
  --#{$prefix}color-action-pressed: #{$ouds-color-action-pressed-light};
  --#{$prefix}color-action-selected: #{$ouds-color-action-selected-light};
  --#{$prefix}color-action-support-enabled: #{$ouds-color-action-support-enabled-light};
  --#{$prefix}color-action-support-focus: #{$ouds-color-action-support-focus-light};
  --#{$prefix}color-action-support-hover: #{$ouds-color-action-support-hover-light};
  --#{$prefix}color-action-support-loading: #{$ouds-color-action-support-loading-light};
  --#{$prefix}color-action-support-pressed: #{$ouds-color-action-support-pressed-light};
  --#{$prefix}color-action-visited: #{$ouds-color-action-visited-light};
  --#{$prefix}color-always-black: #{$ouds-color-always-black-light};
  --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black-light};
  --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white-light};
  --#{$prefix}color-always-white: #{$ouds-color-always-white-light};
  --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-light};
  --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-light};
  --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-light};
  --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-light};
  --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-light};
  --#{$prefix}color-border-default: #{$ouds-color-border-default-light};
  --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-light};
  --#{$prefix}color-border-focus: #{$ouds-color-border-focus-light};
  --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-light};
  --#{$prefix}color-border-muted: #{$ouds-color-border-muted-light};
  --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-light};
  --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-light};
  --#{$prefix}color-content-default: #{$ouds-color-content-default-light};
  --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-light};
  --#{$prefix}color-content-muted: #{$ouds-color-content-muted-light};
  --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-light};
  --#{$prefix}color-content-on-action-enabled: #{$ouds-color-content-on-action-enabled-light};
  --#{$prefix}color-content-on-action-focus: #{$ouds-color-content-on-action-focus-light};
  --#{$prefix}color-content-on-action-highlighted: #{$ouds-color-content-on-action-highlighted-light};
  --#{$prefix}color-content-on-action-hover: #{$ouds-color-content-on-action-hover-light};
  --#{$prefix}color-content-on-action-loading: #{$ouds-color-content-on-action-loading-light};
  --#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-light};
  --#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-light};
  --#{$prefix}color-content-on-overlay-emphasized: #{$ouds-color-content-on-overlay-emphasized-light};
  --#{$prefix}color-content-on-status-emphasized: #{$ouds-color-content-on-status-emphasized-light};
  --#{$prefix}color-content-on-status-emphasized-alt: #{$ouds-color-content-on-status-emphasized-alt-light};
  --#{$prefix}color-content-on-status-muted: #{$ouds-color-content-on-status-muted-light};
  --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-light};
  --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-light};
  --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-light};
  --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-light};
  --#{$prefix}color-decorative-accent-1-default: #{$ouds-color-decorative-accent-1-default-light};
  --#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized-light};
  --#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted-light};
  --#{$prefix}color-decorative-accent-2-default: #{$ouds-color-decorative-accent-2-default-light};
  --#{$prefix}color-decorative-accent-2-emphasized: #{$ouds-color-decorative-accent-2-emphasized-light};
  --#{$prefix}color-decorative-accent-2-muted: #{$ouds-color-decorative-accent-2-muted-light};
  --#{$prefix}color-decorative-accent-3-default: #{$ouds-color-decorative-accent-3-default-light};
  --#{$prefix}color-decorative-accent-3-emphasized: #{$ouds-color-decorative-accent-3-emphasized-light};
  --#{$prefix}color-decorative-accent-3-muted: #{$ouds-color-decorative-accent-3-muted-light};
  --#{$prefix}color-decorative-accent-4-default: #{$ouds-color-decorative-accent-4-default-light};
  --#{$prefix}color-decorative-accent-4-emphasized: #{$ouds-color-decorative-accent-4-emphasized-light};
  --#{$prefix}color-decorative-accent-4-muted: #{$ouds-color-decorative-accent-4-muted-light};
  --#{$prefix}color-decorative-accent-5-default: #{$ouds-color-decorative-accent-5-default-light};
  --#{$prefix}color-decorative-accent-5-emphasized: #{$ouds-color-decorative-accent-5-emphasized-light};
  --#{$prefix}color-decorative-accent-5-muted: #{$ouds-color-decorative-accent-5-muted-light};
  --#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary-light};
  --#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary-light};
  --#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary-light};
  --#{$prefix}color-decorative-neutral-emphasized-higher: #{$ouds-color-decorative-neutral-emphasized-higher-light};
  --#{$prefix}color-decorative-neutral-emphasized-low: #{$ouds-color-decorative-neutral-emphasized-low-light};
  --#{$prefix}color-decorative-neutral-emphasized-lower: #{$ouds-color-decorative-neutral-emphasized-lower-light};
  --#{$prefix}color-decorative-neutral-emphasized-lowest: #{$ouds-color-decorative-neutral-emphasized-lowest-light};
  --#{$prefix}color-decorative-neutral-muted-high: #{$ouds-color-decorative-neutral-muted-high-light};
  --#{$prefix}color-decorative-neutral-muted-higher: #{$ouds-color-decorative-neutral-muted-higher-light};
  --#{$prefix}color-decorative-neutral-muted-highest: #{$ouds-color-decorative-neutral-muted-highest-light};
  --#{$prefix}color-decorative-neutral-muted-low: #{$ouds-color-decorative-neutral-muted-low-light};
  --#{$prefix}color-decorative-neutral-muted-lower: #{$ouds-color-decorative-neutral-muted-lower-light};
  --#{$prefix}color-decorative-neutral-muted-lowest: #{$ouds-color-decorative-neutral-muted-lowest-light};
  --#{$prefix}color-decorative-neutral-muted-medium: #{$ouds-color-decorative-neutral-muted-medium-light};
  --#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100-light};
  --#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200-light};
  --#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300-light};
  --#{$prefix}color-decorative-skin-tint-400: #{$ouds-color-decorative-skin-tint-400-light};
  --#{$prefix}color-decorative-skin-tint-500: #{$ouds-color-decorative-skin-tint-500-light};
  --#{$prefix}color-decorative-skin-tint-600: #{$ouds-color-decorative-skin-tint-600-light};
  --#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700-light};
  --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-light};
  --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-light};
  --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-light};
  --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-light};
  --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-light};
  --#{$prefix}color-overlay-default: #{$ouds-color-overlay-default-light};
  --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-light};
  --#{$prefix}color-overlay-emphasized: #{$ouds-color-overlay-emphasized-light};
  --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-light};
  --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-light};
  --#{$prefix}color-surface-status-accent-emphasized: #{$ouds-color-surface-status-accent-emphasized-light};
  --#{$prefix}color-surface-status-accent-muted: #{$ouds-color-surface-status-accent-muted-light};
  --#{$prefix}color-surface-status-info-emphasized: #{$ouds-color-surface-status-info-emphasized-light};
  --#{$prefix}color-surface-status-info-muted: #{$ouds-color-surface-status-info-muted-light};
  --#{$prefix}color-surface-status-negative-emphasized: #{$ouds-color-surface-status-negative-emphasized-light};
  --#{$prefix}color-surface-status-negative-muted: #{$ouds-color-surface-status-negative-muted-light};
  --#{$prefix}color-surface-status-neutral-emphasized: #{$ouds-color-surface-status-neutral-emphasized-light};
  --#{$prefix}color-surface-status-neutral-muted: #{$ouds-color-surface-status-neutral-muted-light};
  --#{$prefix}color-surface-status-positive-emphasized: #{$ouds-color-surface-status-positive-emphasized-light};
  --#{$prefix}color-surface-status-positive-muted: #{$ouds-color-surface-status-positive-muted-light};
  --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-light};
  --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-light};
  --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-light};
  --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-light};
  --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-light};
  --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none-light};
  --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-light};
  --#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default-light};
  --#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized-light};
  --#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled-light};
}

@include color-mode(dark, true) {
  --#{$prefix}color-action-disabled: #{$ouds-color-action-disabled-dark};
  --#{$prefix}color-action-enabled: #{$ouds-color-action-enabled-dark};
  --#{$prefix}color-action-focus: #{$ouds-color-action-focus-dark};
  --#{$prefix}color-action-highlighted: #{$ouds-color-action-highlighted-dark};
  --#{$prefix}color-action-hover: #{$ouds-color-action-hover-dark};
  --#{$prefix}color-action-loading: #{$ouds-color-action-loading-dark};
  --#{$prefix}color-action-negative-enabled: #{$ouds-color-action-negative-enabled-dark};
  --#{$prefix}color-action-negative-focus: #{$ouds-color-action-negative-focus-dark};
  --#{$prefix}color-action-negative-hover: #{$ouds-color-action-negative-hover-dark};
  --#{$prefix}color-action-negative-loading: #{$ouds-color-action-negative-loading-dark};
  --#{$prefix}color-action-negative-pressed: #{$ouds-color-action-negative-pressed-dark};
  --#{$prefix}color-action-pressed: #{$ouds-color-action-pressed-dark};
  --#{$prefix}color-action-selected: #{$ouds-color-action-selected-dark};
  --#{$prefix}color-action-support-enabled: #{$ouds-color-action-support-enabled-dark};
  --#{$prefix}color-action-support-focus: #{$ouds-color-action-support-focus-dark};
  --#{$prefix}color-action-support-hover: #{$ouds-color-action-support-hover-dark};
  --#{$prefix}color-action-support-loading: #{$ouds-color-action-support-loading-dark};
  --#{$prefix}color-action-support-pressed: #{$ouds-color-action-support-pressed-dark};
  --#{$prefix}color-action-visited: #{$ouds-color-action-visited-dark};
  --#{$prefix}color-always-black: #{$ouds-color-always-black-dark};
  --#{$prefix}color-always-on-black: #{$ouds-color-always-on-black-dark};
  --#{$prefix}color-always-on-white: #{$ouds-color-always-on-white-dark};
  --#{$prefix}color-always-white: #{$ouds-color-always-white-dark};
  --#{$prefix}color-bg-emphasized: #{$ouds-color-bg-emphasized-dark};
  --#{$prefix}color-bg-primary: #{$ouds-color-bg-primary-dark};
  --#{$prefix}color-bg-secondary: #{$ouds-color-bg-secondary-dark};
  --#{$prefix}color-bg-tertiary: #{$ouds-color-bg-tertiary-dark};
  --#{$prefix}color-border-brand-primary: #{$ouds-color-border-brand-primary-dark};
  --#{$prefix}color-border-default: #{$ouds-color-border-default-dark};
  --#{$prefix}color-border-emphasized: #{$ouds-color-border-emphasized-dark};
  --#{$prefix}color-border-focus: #{$ouds-color-border-focus-dark};
  --#{$prefix}color-border-focus-inset: #{$ouds-color-border-focus-inset-dark};
  --#{$prefix}color-border-muted: #{$ouds-color-border-muted-dark};
  --#{$prefix}color-border-on-brand-primary: #{$ouds-color-border-on-brand-primary-dark};
  --#{$prefix}color-content-brand-primary: #{$ouds-color-content-brand-primary-dark};
  --#{$prefix}color-content-default: #{$ouds-color-content-default-dark};
  --#{$prefix}color-content-disabled: #{$ouds-color-content-disabled-dark};
  --#{$prefix}color-content-muted: #{$ouds-color-content-muted-dark};
  --#{$prefix}color-content-on-action-disabled: #{$ouds-color-content-on-action-disabled-dark};
  --#{$prefix}color-content-on-action-enabled: #{$ouds-color-content-on-action-enabled-dark};
  --#{$prefix}color-content-on-action-focus: #{$ouds-color-content-on-action-focus-dark};
  --#{$prefix}color-content-on-action-highlighted: #{$ouds-color-content-on-action-highlighted-dark};
  --#{$prefix}color-content-on-action-hover: #{$ouds-color-content-on-action-hover-dark};
  --#{$prefix}color-content-on-action-loading: #{$ouds-color-content-on-action-loading-dark};
  --#{$prefix}color-content-on-action-pressed: #{$ouds-color-content-on-action-pressed-dark};
  --#{$prefix}color-content-on-brand-primary: #{$ouds-color-content-on-brand-primary-dark};
  --#{$prefix}color-content-on-overlay-emphasized: #{$ouds-color-content-on-overlay-emphasized-dark};
  --#{$prefix}color-content-on-status-emphasized: #{$ouds-color-content-on-status-emphasized-dark};
  --#{$prefix}color-content-on-status-emphasized-alt: #{$ouds-color-content-on-status-emphasized-alt-dark};
  --#{$prefix}color-content-on-status-muted: #{$ouds-color-content-on-status-muted-dark};
  --#{$prefix}color-content-status-info: #{$ouds-color-content-status-info-dark};
  --#{$prefix}color-content-status-negative: #{$ouds-color-content-status-negative-dark};
  --#{$prefix}color-content-status-positive: #{$ouds-color-content-status-positive-dark};
  --#{$prefix}color-content-status-warning: #{$ouds-color-content-status-warning-dark};
  --#{$prefix}color-decorative-accent-1-default: #{$ouds-color-decorative-accent-1-default-dark};
  --#{$prefix}color-decorative-accent-1-emphasized: #{$ouds-color-decorative-accent-1-emphasized-dark};
  --#{$prefix}color-decorative-accent-1-muted: #{$ouds-color-decorative-accent-1-muted-dark};
  --#{$prefix}color-decorative-accent-2-default: #{$ouds-color-decorative-accent-2-default-dark};
  --#{$prefix}color-decorative-accent-2-emphasized: #{$ouds-color-decorative-accent-2-emphasized-dark};
  --#{$prefix}color-decorative-accent-2-muted: #{$ouds-color-decorative-accent-2-muted-dark};
  --#{$prefix}color-decorative-accent-3-default: #{$ouds-color-decorative-accent-3-default-dark};
  --#{$prefix}color-decorative-accent-3-emphasized: #{$ouds-color-decorative-accent-3-emphasized-dark};
  --#{$prefix}color-decorative-accent-3-muted: #{$ouds-color-decorative-accent-3-muted-dark};
  --#{$prefix}color-decorative-accent-4-default: #{$ouds-color-decorative-accent-4-default-dark};
  --#{$prefix}color-decorative-accent-4-emphasized: #{$ouds-color-decorative-accent-4-emphasized-dark};
  --#{$prefix}color-decorative-accent-4-muted: #{$ouds-color-decorative-accent-4-muted-dark};
  --#{$prefix}color-decorative-accent-5-default: #{$ouds-color-decorative-accent-5-default-dark};
  --#{$prefix}color-decorative-accent-5-emphasized: #{$ouds-color-decorative-accent-5-emphasized-dark};
  --#{$prefix}color-decorative-accent-5-muted: #{$ouds-color-decorative-accent-5-muted-dark};
  --#{$prefix}color-decorative-brand-primary: #{$ouds-color-decorative-brand-primary-dark};
  --#{$prefix}color-decorative-brand-secondary: #{$ouds-color-decorative-brand-secondary-dark};
  --#{$prefix}color-decorative-brand-tertiary: #{$ouds-color-decorative-brand-tertiary-dark};
  --#{$prefix}color-decorative-neutral-emphasized-higher: #{$ouds-color-decorative-neutral-emphasized-higher-dark};
  --#{$prefix}color-decorative-neutral-emphasized-low: #{$ouds-color-decorative-neutral-emphasized-low-dark};
  --#{$prefix}color-decorative-neutral-emphasized-lower: #{$ouds-color-decorative-neutral-emphasized-lower-dark};
  --#{$prefix}color-decorative-neutral-emphasized-lowest: #{$ouds-color-decorative-neutral-emphasized-lowest-dark};
  --#{$prefix}color-decorative-neutral-muted-high: #{$ouds-color-decorative-neutral-muted-high-dark};
  --#{$prefix}color-decorative-neutral-muted-higher: #{$ouds-color-decorative-neutral-muted-higher-dark};
  --#{$prefix}color-decorative-neutral-muted-highest: #{$ouds-color-decorative-neutral-muted-highest-dark};
  --#{$prefix}color-decorative-neutral-muted-low: #{$ouds-color-decorative-neutral-muted-low-dark};
  --#{$prefix}color-decorative-neutral-muted-lower: #{$ouds-color-decorative-neutral-muted-lower-dark};
  --#{$prefix}color-decorative-neutral-muted-lowest: #{$ouds-color-decorative-neutral-muted-lowest-dark};
  --#{$prefix}color-decorative-neutral-muted-medium: #{$ouds-color-decorative-neutral-muted-medium-dark};
  --#{$prefix}color-decorative-skin-tint-100: #{$ouds-color-decorative-skin-tint-100-dark};
  --#{$prefix}color-decorative-skin-tint-200: #{$ouds-color-decorative-skin-tint-200-dark};
  --#{$prefix}color-decorative-skin-tint-300: #{$ouds-color-decorative-skin-tint-300-dark};
  --#{$prefix}color-decorative-skin-tint-400: #{$ouds-color-decorative-skin-tint-400-dark};
  --#{$prefix}color-decorative-skin-tint-500: #{$ouds-color-decorative-skin-tint-500-dark};
  --#{$prefix}color-decorative-skin-tint-600: #{$ouds-color-decorative-skin-tint-600-dark};
  --#{$prefix}color-decorative-skin-tint-700: #{$ouds-color-decorative-skin-tint-700-dark};
  --#{$prefix}color-decorative-skin-tint-800: #{$ouds-color-decorative-skin-tint-800-dark};
  --#{$prefix}color-decorative-skin-tint-900: #{$ouds-color-decorative-skin-tint-900-dark};
  --#{$prefix}color-opacity-lower: #{$ouds-color-opacity-lower-dark};
  --#{$prefix}color-opacity-lowest: #{$ouds-color-opacity-lowest-dark};
  --#{$prefix}color-opacity-transparent: #{$ouds-color-opacity-transparent-dark};
  --#{$prefix}color-overlay-default: #{$ouds-color-overlay-default-dark};
  --#{$prefix}color-overlay-drag: #{$ouds-color-overlay-drag-dark};
  --#{$prefix}color-overlay-emphasized: #{$ouds-color-overlay-emphasized-dark};
  --#{$prefix}color-overlay-modal: #{$ouds-color-overlay-modal-dark};
  --#{$prefix}color-surface-brand-primary: #{$ouds-color-surface-brand-primary-dark};
  --#{$prefix}color-surface-status-accent-emphasized: #{$ouds-color-surface-status-accent-emphasized-dark};
  --#{$prefix}color-surface-status-accent-muted: #{$ouds-color-surface-status-accent-muted-dark};
  --#{$prefix}color-surface-status-info-emphasized: #{$ouds-color-surface-status-info-emphasized-dark};
  --#{$prefix}color-surface-status-info-muted: #{$ouds-color-surface-status-info-muted-dark};
  --#{$prefix}color-surface-status-negative-emphasized: #{$ouds-color-surface-status-negative-emphasized-dark};
  --#{$prefix}color-surface-status-negative-muted: #{$ouds-color-surface-status-negative-muted-dark};
  --#{$prefix}color-surface-status-neutral-emphasized: #{$ouds-color-surface-status-neutral-emphasized-dark};
  --#{$prefix}color-surface-status-neutral-muted: #{$ouds-color-surface-status-neutral-muted-dark};
  --#{$prefix}color-surface-status-positive-emphasized: #{$ouds-color-surface-status-positive-emphasized-dark};
  --#{$prefix}color-surface-status-positive-muted: #{$ouds-color-surface-status-positive-muted-dark};
  --#{$prefix}color-surface-status-warning-emphasized: #{$ouds-color-surface-status-warning-emphasized-dark};
  --#{$prefix}color-surface-status-warning-muted: #{$ouds-color-surface-status-warning-muted-dark};
  --#{$prefix}elevation-color-default: #{$ouds-elevation-color-default-dark};
  --#{$prefix}elevation-color-drag: #{$ouds-elevation-color-drag-dark};
  --#{$prefix}elevation-color-emphasized: #{$ouds-elevation-color-emphasized-dark};
  --#{$prefix}elevation-color-none: #{$ouds-elevation-color-none-dark};
  --#{$prefix}elevation-color-raised: #{$ouds-elevation-color-raised-dark};
  --#{$prefix}elevation-color-sticky-default: #{$ouds-elevation-color-sticky-default-dark};
  --#{$prefix}elevation-color-sticky-emphasized: #{$ouds-elevation-color-sticky-emphasized-dark};
  --#{$prefix}elevation-color-sticky-navigation-scrolled: #{$ouds-elevation-color-sticky-navigation-scrolled-dark};
}

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

Dozens of root level CSS variables are repeated as overrides for dark mode. These are scoped to the color mode selector, which defaults to data-bs-theme but can be configured to use a prefers-color-scheme media query. Use these variables as a guideline for generating your own new color modes.

scss/_root.scss

@if $enable-bootstrap-compatibility {
  --#{$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)};

  // OUDS mod
  @each $color, $value in $theme-colors-dark {
    --#{$prefix}#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors-rgb-dark {
    --#{$prefix}#{$color}-rgb: #{$value};
  }
  // End mod

  @each $color, $value in $theme-colors-text-dark {
    --#{$prefix}#{$color}-text-emphasis: #{$value};
  }

  @each $color, $value in $theme-colors-bg-subtle-dark {
    --#{$prefix}#{$color}-bg-subtle: #{$value};
  }

  @each $color, $value in $theme-colors-border-subtle-dark {
    --#{$prefix}#{$color}-border-subtle: #{$value};
  }
}

// OUDS mod
@each $icon, $svg in $svg-as-custom-props-dark {
  --#{$prefix}#{$icon}-icon: #{escape-svg($svg)};
}
// End mod

--#{$prefix}heading-color: #{$headings-color-dark};

@if $enable-bootstrap-compatibility {
  --#{$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};
@if $enable-bootstrap-compatibility {
  --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
}

--#{$prefix}focus-ring-color: #{$focus-ring-color-dark}; // OUDS mod

--#{$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};
--#{$prefix}form-check-filter: #{$form-check-filter-dark}; // OUDS mod
--#{$prefix}form-check-input-disabled-color: #{$form-check-input-disabled-color-dark}; // OUDS mod
--#{$prefix}form-select-indicator: #{$form-select-indicator-dark}; // OUDS mod
--#{$prefix}form-select-disabled-indicator: #{$form-select-disabled-indicator-dark}; // OUDS mod
--#{$prefix}form-color-disabled-filter: #{$form-color-disabled-filter-dark};
--#{$prefix}form-switch-square-bg: #{$form-switch-square-bg-dark}; // OUDS mod
--#{$prefix}form-switch-unchecked-invalid-border-color: #{$form-switch-unchecked-invalid-border-color-dark}; // OUDS mod

// OUDS mod
// Table-specific styles
--#{$prefix}table-active-bg-factor: #{$table-active-bg-factor-dark};
--#{$prefix}table-hover-bg-factor: #{$table-hover-bg-factor-dark};
--#{$prefix}table-striped-bg-factor: #{$table-striped-bg-factor-dark};

// Breadcrumb-specific styles
--#{$prefix}breadcrumb-divider-filter: #{$breadcrumb-divider-filter-dark};
// End mod

Sass variables

Bootstrap $enable-bootstrap-compatibility: true

This part is enabled only when $enable-bootstrap-compatibility is set to true. Read more about Bootstrap compatibility.

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.

scss/_variables-dark.scss

$primary-dark:    $ouds-color-content-brand-primary-dark;
$secondary-dark:  $white;
$success-dark:    $ouds-color-functional-malachite-300;
$info-dark:       $ouds-color-functional-dodger-blue-300;
$warning-dark:    $ouds-color-functional-sun-300;
$danger-dark:     $ouds-color-functional-scarlet-300;
$light-dark:      $ouds-color-bg-secondary-dark;
$dark-dark:       $ouds-color-bg-emphasized-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,
);
// End mod

$primary-text-emphasis-dark:        $ouds-color-content-brand-primary-dark; // OUDS mod: instead of `tint-color($primary, 40%)`
$secondary-text-emphasis-dark:      $ouds-color-content-muted-dark; // OUDS mod: instead of `tint-color($secondary, 40%)`
$success-text-emphasis-dark:        $ouds-color-content-status-positive-dark; // OUDS mod: instead of `tint-color($success, 40%)`
$info-text-emphasis-dark:           $ouds-color-content-status-info-dark; // OUDS mod: instead of `tint-color($info, 40%)`
$warning-text-emphasis-dark:        $ouds-color-content-status-warning-dark; // OUDS mod: instead of `tint-color($warning, 40%)`
$danger-text-emphasis-dark:         $ouds-color-content-status-negative-dark; // OUDS mod: instead of `tint-color($danger, 40%)`
$light-text-emphasis-dark:          $ouds-color-content-disabled-dark; // OUDS mod: instead of `$gray-100`
$dark-text-emphasis-dark:           $ouds-color-content-default-dark; // OUDS mod: instead of `$gray-300`

$primary-bg-subtle-dark:            $ouds-color-bg-tertiary-dark; // OUDS mod: instead of `shade-color($primary, 80%)`
$secondary-bg-subtle-dark:          $ouds-color-bg-secondary-dark; // OUDS mod: instead of `shade-color($secondary, 80%)`
$success-bg-subtle-dark:            $ouds-color-surface-status-positive-muted-dark; // OUDS mod: instead of `shade-color($success, 80%)`
$info-bg-subtle-dark:               $ouds-color-surface-status-info-muted-dark; // OUDS mod: instead of `shade-color($info, 80%)`
$warning-bg-subtle-dark:            $ouds-color-surface-status-warning-muted-dark; // OUDS mod: instead of `shade-color($warning, 80%)`
$danger-bg-subtle-dark:             $ouds-color-surface-status-negative-muted-dark; // OUDS mod: instead of `shade-color($danger, 80%)`
$light-bg-subtle-dark:              $ouds-color-bg-secondary-dark; // OUDS mod: instead of `$gray-800`
$dark-bg-subtle-dark:               $ouds-color-surface-status-neutral-muted-dark; // OUDS mod: instead of `mix($gray-800, $black)`

$primary-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($primary, 40%)`
$secondary-border-subtle-dark:      $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($secondary, 40%)`
$success-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($success, 40%)`
$info-border-subtle-dark:           $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($info, 40%)`
$warning-border-subtle-dark:        $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($warning, 40%)`
$danger-border-subtle-dark:         $ouds-color-border-default-dark; // OUDS mod: instead of `shade-color($danger, 40%)`
$light-border-subtle-dark:          $ouds-color-border-default-dark; // OUDS mod: instead of `$gray-700`
$dark-border-subtle-dark:           $ouds-color-border-default-dark; // OUDS mod: instead of `$gray-800`

$body-color-dark:                   $ouds-color-content-default-dark; // OUDS mod: instead of `$gray-300`
$body-bg-dark:                      $ouds-color-bg-primary-dark; // OUDS mod: instead of `$gray-900`
$body-secondary-color-dark:         $ouds-color-content-muted-dark; // OUDS mod: instead of `rgba($body-color-dark, .75)`
$body-secondary-bg-dark:            $ouds-color-bg-secondary-dark; // OUDS mod: instead of `$gray-800`
$body-tertiary-color-dark:          $ouds-color-content-disabled-dark; // OUDS mod: instead of `rgba($body-color-dark, .5)`
$body-tertiary-bg-dark:             $ouds-color-bg-tertiary-dark; // OUDS mod: instead of `mix($gray-800, $gray-900, 50%)`
$body-emphasis-color-dark:          $ouds-color-content-default-dark; // OUDS mod: instead of `$gray-100`
$border-color-dark:                 $ouds-color-border-emphasized-dark; // OUDS mod: instead of `$gray-700`
$border-color-translucent-dark:     $ouds-color-border-default-dark; // OUDS mod: instead of `rgba($white, .15)`
$headings-color-dark:               inherit;
$link-color-dark:                   $white; // OUDS mod: instead of `tint-color($primary, 40%)`
$link-hover-color-dark:             $ouds-color-orange-500; // OUDS mod: instead of `shift-color($link-color-dark, -$link-shade-percentage)`
$code-color-dark:                   $ouds-color-content-muted-dark; // OUDS mod: instead of `tint-color($code-color, 40%)`
$mark-color-dark:                   $ouds-color-content-on-action-highlighted-dark; // OUDS mod: instead of `$body-color-dark`
$mark-bg-dark:                      $ouds-color-action-highlighted-dark; // OUDS mod: instead of `$yellow-800`

$focus-ring-color-dark:             rgba($ouds-color-orange-500, $focus-ring-opacity); // OUDS mod

$success-icon-dark:                 url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 125 125'><path fill='#{$ouds-color-functional-malachite-500}' d='M62.5 0a62.5 62.5 0 1 0 0 125 62.5 62.5 0 0 0 0-125zm28 29.4c3.3 0 6 2.6 6 5.9a5.9 5.9 0 0 1-1.3 3.7L57.7 86a5.8 5.8 0 0 1-9.1 0L29.8 62.5c-.8-1-1.2-2.3-1.2-3.7a5.9 5.9 0 0 1 1.7-4.1l2.3-2.4a5.8 5.8 0 0 1 4.2-1.7 5.8 5.8 0 0 1 3.8 1.4L52 64.7 86.6 31a5.8 5.8 0 0 1 4-1.6z'/></svg>"); // OUDS mod
$danger-icon-dark:                  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 125'><path fill='#{$ouds-color-functional-scarlet-600}' d='M70.3 0c-5.8 0-10.8 3.1-13.5 7.8L2.3 101.3l-.2.2A15.6 15.6 0 0 0 15.6 125H125a15.6 15.6 0 0 0 13.5-23.5L83.8 7.8A15.6 15.6 0 0 0 70.3 0zm19.2 50a6.4 6.4 0 0 1 4.4 1.9 6.4 6.4 0 0 1 0 9L79.4 75.6l15 15a6.4 6.4 0 0 1 0 9.2 6.4 6.4 0 0 1-4.5 1.9 6.4 6.4 0 0 1-4.6-2l-15-15-15 15a6.4 6.4 0 0 1-4.6 2 6.4 6.4 0 0 1-4.6-2 6.4 6.4 0 0 1 0-9l15-15L46.8 61a6.4 6.4 0 1 1 9-9.1l14.6 14.5L84.8 52a6.4 6.4 0 0 1 4.7-1.9z'/></svg>"); // OUDS mod

// OUDS mod
$svg-as-custom-props-dark: (
  "success": $success-icon-dark,
  "error":   $danger-icon-dark
);
// End mod

//
// Forms
//

$form-check-filter-dark:                none; // OUDS mod
$form-check-input-disabled-color-dark:  $gray-700; // OUDS mod
$form-color-disabled-filter-dark:       brightness(0) invert(1) brightness(.4); // OUDS mod
$form-switch-square-bg-dark:            $ouds-color-functional-dark-gray-880; // OUDS mod

// OUDS mod: no $form-select-indicator-color-dark
$form-select-indicator-dark:            escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$white}' d='M7 7 0 0h14L7 7z'/></svg>")); // OUDS mod: instead of Bootstrap svg
$form-select-disabled-indicator-dark:   escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><path fill='#{$gray-600}' d='M7 7 0 0h14L7 7z'/></svg>")); // OUDS mod

// OUDS mod: no $form-switch-color-dark
// OUDS mod: no $form-switch-bg-image-dark

$form-valid-color-dark:                           var(--#{$prefix}success-text-emphasis); // OUDS mod: instead of `$green-300`
$form-valid-border-color-dark:                    var(--#{$prefix}success); // OUDS mod: instead of `$green-300`
$form-invalid-color-dark:                         var(--#{$prefix}danger-text-emphasis); // OUDS mod: instead of `$red-300`
$form-invalid-border-color-dark:                  var(--#{$prefix}danger); // OUDS mod: instead of `$red-300`
$form-switch-unchecked-invalid-border-color-dark: $form-invalid-border-color-dark; // OUDS mod

//
// Accordion
//

// OUDS mod: no $accordion-icon-color-dark
// OUDS mod: no $accordion-icon-active-color-dark

// OUDS mod: no $accordion-button-icon-dark
// OUDS mod: no $accordion-button-active-icon-dark

//
// Breadcrumb
//

$breadcrumb-divider-filter-dark:      $invert-filter; // OUDS mod

//
// Tables
//

$table-striped-bg-factor-dark:        1; // OUDS mod
$table-active-bg-factor-dark:         .35; // OUDS mod
$table-hover-bg-factor-dark:          .135; // OUDS mod

Sass mixins

Styles for dark mode, and any custom color modes you create, can be scoped appropriately to the data-bs-theme attribute selector or media query with the customizable color-mode() mixin. See the Sass usage section for more details.

scss/mixins/_color-mode.scss

@mixin color-mode($mode: light, $root: false, $inverted-mode: if($mode == light, dark, light)) {
  @if $color-mode-type == "media-query" {
    @if $root == true {
      @media (prefers-color-scheme: $mode) {
        #{$ouds-root-selector} {
          @content;
        }
      }
    } @else {
      @media (prefers-color-scheme: $mode) {
        @content;
      }
    }
  } @else if $root == true and $mode == light {
    #{$ouds-root-selector},
    [data-bs-theme="#{$mode}"],
    #{$ouds-root-selector}[data-bs-theme="#{$mode}"] [data-bs-theme="root"],
    #{$ouds-root-selector}[data-bs-theme="#{$inverted-mode}"] [data-bs-theme="root-inverted"] {
      @content;
    }
  } @else {
    [data-bs-theme="#{$mode}"],
    #{$ouds-root-selector}[data-bs-theme="#{$mode}"] [data-bs-theme="root"],
    #{$ouds-root-selector}[data-bs-theme="#{$inverted-mode}"] [data-bs-theme="root-inverted"] {
      @content;
    }
  }
}

Color modes

On this page On this page

Modes

Static color modes

light mode

dark mode

Dynamic color modes

root-inverted mode

root mode

How to use

Examples

How it works

Usage

Enable dark mode

Building with Sass

Change default behavior

Change the root selector

JavaScript

CSS

Sass tokens

Raw tokens

Semantic tokens

Variables

Sass variables

Sass mixins

On this page

`light` mode

`dark` mode

`root-inverted` mode

`root` mode