<!-- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.