Overriding Color Mode

To force an element (and its children) to display in light mode, add the class light-mode to the element.

<div class="card light-mode">
  <h3 class="card-title">Light Mode Example</h3>
  <p>
    This card always appears in light mode. So do the
    following elements inside it:
  </p>
  <div class="flow">
    <div class="chip blue">This Chip</div>
    <button class="button">This Button</button>
    <a class="link">and this Link</a>
  </div>
</div>

To force an element (and its children) to display in dark mode, add the class dark-mode to the element.

<div class="card dark-mode">
  <h3 class="card-title">Dark Mode Example</h3>
  <p>
    This card always appears in dark mode. So do the
    following elements inside it:
  </p>
  <div class="flow">
    <div class="chip blue">This Chip</div>
    <button class="button">This Button</button>
    <a class="link">and this Link</a>
  </div>
</div>

Exceptions

Drawers & Modals

Since these components appear in the top layer regardless of their place in the DOM, we choose to have them follow the document’s color mode rather than inheriting the color mode of their parent element. While this is not the default behavior for CSS, it better aligns with how these components look and behave.

To override this behavior, reapply the color mode class to the .drawer or .modal element to match the desired color mode.