Scheme toggle Since v3.1.0

import '@rhds/elements/rh-scheme-toggle/rh-scheme-toggle.js';

body {
  color-scheme: light dark;
  background-color: light-dark(var(--rh-color-surface-lightest, #ffffff),
      var(--rh-color-surface-darkest, #151515));
  color: light-dark(var(--rh-color-text-primary-default-on-light, #151515),
      var(--rh-color-text-primary-default-on-dark, #ffffff));
}

rh-scheme-toggle {
  margin-block-start: var(--rh-space-md, 8px);
}

<rh-scheme-toggle></rh-scheme-toggle>

import { SchemeToggle } from "@rhds/elements/react/rh-scheme-toggle/rh-scheme-toggle.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <SchemeToggle />
);

import '@rhds/elements/rh-scheme-toggle/rh-scheme-toggle.js';

const toggle = document.getElementById('scheme-toggle');
const form = document.getElementById('scheme-toggle-events');
const events = [];
form.addEventListener('submit', e => e.preventDefault());

toggle.addEventListener('scheme-changed', event => {
  events.push(event.scheme);
  form.elements.events.value = events.join(', ');
});

body {
  color-scheme: light dark;
  background-color: light-dark(var(--rh-color-surface-lightest, #ffffff),
      var(--rh-color-surface-darkest, #151515));
  color: light-dark(var(--rh-color-text-primary-default-on-light, #151515),
      var(--rh-color-text-primary-default-on-dark, #ffffff));
}

rh-scheme-toggle {
  padding: var(--rh-space-md, 8px);
}

.container {
  margin-inline: 20px;
  margin-block-end: var(--rh-space-md, 8px);
  font-family: var(--rh-font-family-body-text);
}

<form id="scheme-toggle-events">
  <rh-scheme-toggle id="scheme-toggle"></rh-scheme-toggle>

  <p class="container">
    A <code>scheme-changed</code> event fires whenever the color scheme changes.
  </p>

  <fieldset class="container">
    <legend>Events Fired</legend>
    <output name="events">No events yet</output>
  </fieldset>
</form>

import { SchemeToggle } from "@rhds/elements/react/rh-scheme-toggle/rh-scheme-toggle.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <form id="scheme-toggle-events">
    <SchemeToggle id="scheme-toggle" />
    <p className="container">
      A
      <code>scheme-changed</code>
      event fires whenever the color scheme changes.
    </p>
    <fieldset className="container">
      <legend>Events Fired</legend>
      <output name="events">No events yet</output>
    </fieldset>
  </form>
);

import '@rhds/elements/rh-scheme-toggle/rh-scheme-toggle.js';

body {
  color-scheme: light dark;
  background-color: light-dark(var(--rh-color-surface-lightest, #ffffff),
      var(--rh-color-surface-darkest, #151515));
  color: light-dark(var(--rh-color-text-primary-default-on-light, #151515),
      var(--rh-color-text-primary-default-on-dark, #ffffff));
}

rh-scheme-toggle {
  --rh-scheme-toggle-flex-flow: column nowrap;
  --rh-scheme-toggle-align-items: flex-start;
  --rh-scheme-toggle-gap: var(--rh-space-md, 8px);

  margin-block-start: var(--rh-space-md, 8px);
}

<rh-scheme-toggle></rh-scheme-toggle>

import { SchemeToggle } from "@rhds/elements/react/rh-scheme-toggle/rh-scheme-toggle.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <SchemeToggle />
);