Scheme dropdown Since v4.2.0

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

body {
  color-scheme: light dark;
  background-color: var(--rh-color-surface);
  color: var(--rh-color-text-primary);
}

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

<rh-scheme-dropdown></rh-scheme-dropdown>

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

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

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

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

body {
  color-scheme: light dark;
}

#container {
  background-color: var(--rh-color-surface);
  color: var(--rh-color-text-primary);
  display: flex;
  block-size: 100svh;
  justify-content: space-between;
  padding: var(--rh-space-lg, 16px);
}

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

<div id="container">
  <rh-scheme-dropdown id="left"></rh-scheme-dropdown>
  <rh-scheme-dropdown id="right"></rh-scheme-dropdown>
</div>

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

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

export const Demo = () => (
  <div id="container">
    <SchemeDropdown id="left" />
    <SchemeDropdown id="right" />
  </div>
);

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

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

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

body {
  color-scheme: light dark;
  background-color: var(--rh-color-surface);
  color: var(--rh-color-text-primary);
}

rh-scheme-dropdown {
  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-dropdown-events">
  <rh-scheme-dropdown id="scheme-dropdown"></rh-scheme-dropdown>

  <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 { SchemeDropdown } from "@rhds/elements/react/rh-scheme-dropdown/rh-scheme-dropdown.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-dropdown-events">
    <SchemeDropdown id="scheme-dropdown" />
    <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>
);