Jump To:

  1. Basic Theming
  2. Contextual Inversion
  3. Fake Inversion Utility

Themes

The themes module orchestrates custom property variations to easily implement light/dark modes and contextual themes.

Basic Theming

Applying the .theme-dark class to any container will override the CSS custom properties within that scope, instantly changing the appearance of its children.

Light Theme Container

This inherits the default colors.

Dark Theme Container

This container has the .theme-dark class applied.

HTML 
<div class="demo-theme-box theme-light">
  <h3>Light Theme Container</h3>
  <p>This inherits the default colors.</p>
  <button class="button">A Button</button>
</div>

<div class="demo-theme-box theme-dark">
<h3>Dark Theme Container</h3>
<p>This container has the <code>.theme-dark</code> class applied.</p>
<button class="button">A Button</button>
</div>

Contextual Inversion

Sometimes you want a specific element to always contrast with its parent container. Instead of hardcoding .theme-dark or .theme-light, you can use the .theme-inverse utility. It automatically flips the variables to the opposite of the current context.

Light Theme Container

Inverse Box

This box has .theme-inverse applied, so it becomes dark.

Dark Theme Container

Inverse Box

This box has .theme-inverse applied, so it becomes light.

HTML 
<div class="demo-theme-box theme-light">
  <h3>Light Theme Container</h3>
  <div class="demo-theme-box theme-inverse">
    <h4>Inverse Box</h4>
    <p>This box has <code>.theme-inverse</code> applied, so it becomes dark.</p>
  </div>
</div>

<div class="demo-theme-box theme-dark">
<h3>Dark Theme Container</h3>
<div class="demo-theme-box theme-inverse">
<h4>Inverse Box</h4>
<p>This box has <code>.theme-inverse</code> applied, so it becomes light.</p>
</div>
</div>

Fake Inversion Utility

Sometimes you have elements (like iframes or canvas charts) that cannot accept CSS custom properties but still need to be "themed". The .theme-fake-invert utility class achieves this using CSS filters. It works by inverting the element's colors and then adjusting the hue to match the current theme's context.

Dark Theme Context

Below is a div with hardcoded black text on a white background (simulating a light-only widget).

Inverted Widget: This widget is now dark to match its container.

Light Theme Context

Below is a div with hardcoded white text on a black background (simulating a dark-only widget).

Inverted Widget: This widget is now light to match its container.
HTML 
<div class="demo-theme-box theme-dark">
  <h3>Dark Theme Context</h3>

<p>Below is a div with hardcoded black text on a white background (simulating a light-only widget).</p>


<div class="demo-theme-fake-widget theme-fake-invert">
<strong>Inverted Widget:</strong> This widget is now dark to match its container.
</div>
</div>


<div class="demo-theme-box theme-light">
<h3>Light Theme Context</h3>


<p>Below is a div with hardcoded white text on a black background (simulating a dark-only widget).</p>


<div class="demo-theme-fake-widget  demo-theme-fake-widget--dark theme-fake-invert">
<strong>Inverted Widget:</strong> This widget is now light to match its container.
</div>
</div>