Color

Color mode is set with data-density-color-mode. Put it on any ancestor to switch the Density color variables inherited by that subtree.

function ColorModePanel({ mode }: { mode: "light" | "dark" }) {
  return (
    <div
      data-density-color-mode={mode}
      data-dn-level="2"
      style={{
        display: "grid",
        gap: "10px",
        minWidth: 0,
        padding: "12px",
      }}
    >
      <div
        style={{
          color: "var(--dn-color-text)",
          display: "grid",
          gap: "10px",
        }}
      >
        <span style={{ fontSize: "13px", fontWeight: 500 }}>{mode}</span>
        <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
          <span data-dn-presentation="button" data-dn-emphasis="primary">
            Primary
          </span>
        </div>
      </div>
    </div>
  );
}

export default function ColorModeExample() {
  return (
    <div
      style={{
        display: "grid",
        gap: "12px",
        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
        width: "100%",
      }}
    >
      <ColorModePanel mode="light" />
      <ColorModePanel mode="dark" />
    </div>
  );
}