Cycle background color
### Feature Request
I'd like to be able to adjust the background color, or at least be able to cycle through a few preset colors.
### Use Case
I typically compare against pure white, middle gray, and pure black to get a decent reference without a perfect environment. I'm currently doing this via a Boost (Arc browser built-in userscript) when the `viewport` is double clicked and it works pretty well, but it would be nice to have built-in.
```
const maxAttachAttempts = 10;
let attemptNumber = 0;
const getViewport = (callback, reject) => {
attemptNumber++;
const viewport = document.querySelector("[ref='$viewport']");
if (viewport) {
callback(viewport);
} else {
if (attemptNumber < maxAttachAttempts) {
console.info(
`Viewport not found. Attempting again in ${attemptNumber} seconds`
);
window.setTimeout(() => {
getViewport(callback, reject);
}, 1000 * attemptNumber);
} else {
console.error(`Viewport not found after ${attemptNumber} attempts`);
reject();
}
}
};
const awaitViewport = new Promise((resolve, reject) => {
getViewport(resolve, reject);
});
awaitViewport.then((viewport) => {
const colors = [null, "#fff", "#808080", "#000"];
let currentColor = null;
const cycleBg = (e) => {
// Only take action if the event was triggered from the expected element
if (e.currentTarget !== viewport) {
return;
}
// Prevent bubbling or native behavior for qualified events
e.stopPropagation();
e.preventDefault();
// Cycle through the colors
const currentIdx = colors.indexOf(currentColor);
const nextIdx = currentIdx >= colors.length - 1 ? 0 : currentIdx + 1;
const nextColor = colors[nextIdx];
// Update the background color
viewport.style.background = nextColor;
currentColor = nextColor;
};
// Attach the event listener
viewport.addEventListener("dblclick", cycleBg);
});
```
