<!--  Demo: https://accent-color.glitch.me/ -->
<canvas id="canvas" height="48"></canvas>
<fildset>
  <input type="checkbox" />
  <input type="checkbox" disabled />
  <input type="checkbox" checked />
  <input type="checkbox" checked disabled />
</fildset>

<fildset>
  <input type="radio" />
  <input type="radio" disabled />
  <input type="radio" checked />
  <input type="radio" checked disabled />
</fildset>

<progress max="100" value="0"> 0% </progress>
<progress max="100" value="5"> 5% </progress>
<progress max="100" value="50"> 50% </progress>
<progress max="100" value="95"> 95% </progress>
<progress max="100" value="100"> 100% </progress>
<input type="range" />
<input type="range" disabled />
<input type="range" list="tickmarks1" />
<datalist id="tickmarks1">
  <option value="0"> </option>
  <option value="10"> </option>
  <option value="20"> </option>
  <option value="30"> </option>
  <option value="40"> </option>
  <option value="50"> </option>
  <option value="60"> </option>
  <option value="70"> </option>
  <option value="80"> </option>
  <option value="90"> </option>
  <option value="100"> </option>
</datalist>
<input type="button" value="Button" />
<input type="button" value="Button" disabled />
<input type="text" value="value" />
<input type="text" value="value" disabled />
<input type="password" value="value" />
<input type="password" value="value" disabled />
<input type="number" value="42" />
<input type="number" value="42" disabled />
<textarea>value</textarea>
<textarea disabled>value</textarea>
<select>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>
<select disabled>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>
<select multiple>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>
<select multiple disabled>
  <option>value 1</option>
  <option>value 2</option>
  <option>value 3</option>
</select>
<meter min="0" max="100" low="33" high="66" optimum="80" value="20"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="50"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="66"></meter>
<meter min="0" max="100" low="33" high="66" optimum="80" value="90"></meter>
<input type="color" />
<input type="color" list="colorslist" />
<datalist id="colorslist">
  <option value="#00ffff" />
  <option value="#ff00ff" />
  <option value="#ffff00" />
  <option value="#ffaa00" />
</datalist>
<input type="date" />
<input type="week" />
<input type="month" />
<input type="time" />
<input type="datetime" />
<input type="datetime-local" />
<input type="email" />
<input type="text" list="ice-cream-flavors" />
<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>
<input type="file" value="value" />
<input type="file" value="value" disabled />
<input type="search" value="value" />
<input type="search" value="value" disabled />
<input type="hidden" />
<input type="image" src="https://www.w3cplus.com/sites/default/files/blogs/2021/2108/all.svg" value="全部" />
<input type="reset" />
<input type="tel" />
<input type="url" />
:root {
  color-scheme: light dark;
}

body {
  margin: 72px 15% 24px 15%;
}

@media (max-width: 600px) {
  body {
    margin: 72px 24px;
  }
}

canvas {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 20px;
}
const context = canvas.getContext("2d");

function drawCanvas() {
  canvas.width = window.innerWidth * devicePixelRatio;
  canvas.height = 48 * devicePixelRatio;
  context.rect(0, 0, canvas.width, canvas.height);
  const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
  gradient.addColorStop(0, "cyan");
  gradient.addColorStop(0.2, "blue");
  gradient.addColorStop(0.4, "magenta");
  gradient.addColorStop(0.6, "red");
  gradient.addColorStop(0.8, "green");
  gradient.addColorStop(1, "yellow");
  context.fillStyle = gradient;
  context.fill();
  context.font = `italic ${
    16 * devicePixelRatio
  }px Google Sans, Arial, sans-serif`;
  context.fillStyle = "white";
  context.textAlign = "center";
  context.fillText(
    "Pick a color to change CSS accent-color",
    canvas.width / 2,
    canvas.height - 16 * devicePixelRatio
  );
}

function pickColor(event) {
  const x = event.offsetX * devicePixelRatio;
  const y = event.offsetY * devicePixelRatio;
  const p = context.getImageData(x, y, 1, 1).data;
  document.body.style.accentColor = `rgb(${p[0]}, ${p[1]}, ${p[2]})`;
}

if (document.createElement("detect").style.accentColor === "") {
  drawCanvas();
  window.onresize = drawCanvas;
  canvas.onclick = pickColor;
} else {
  canvas.width = window.innerWidth * devicePixelRatio;
  canvas.height = 48 * devicePixelRatio;
  context.rect(0, 0, canvas.width, canvas.height);
  context.fillStyle = "red";
  context.fill();
  context.fillStyle = "white";
  context.font = `italic ${
    16 * devicePixelRatio
  }px Google Sans, Arial, sans-serif`;
  context.textAlign = "center";
  context.fillText(
    "CSS accent-color is not supported in this browser yet",
    canvas.width / 2,
    canvas.height - 16 * devicePixelRatio
  );
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.