Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/ignore-colors.js.html

Last active November 26, 2020 17:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/b9d09afadf1237d2b2b7a967fa925b57 to your computer and use it in GitHub Desktop.
Save nfreear/b9d09afadf1237d2b2b7a967fa925b57 to your computer and use it in GitHub Desktop.
Download ZIP
Ignore colors / colours Javascript
Raw
ignore-colors.js.html
<!doctype html> <meta charset=utf-8 /> <title> *Video test / Ignore colours </title>
<style>
.X.body > div { background: #eee; color: #333; }
</style>
<div>
<h1> Ignore colours </h1>
<p> This Javascript works in Windows <q>High Contrast</q> mode, but not in Mac OS <q>Invert Colors</q> mode. </p>
<p><a href="#!-test-A">Test A</a>
<p>
<video
controls
src=
"https://media-podcast.open.ac.uk/feeds/3920/20191113T154658_Sarah_-_additional_needs.mp4"
>
</video>
<p><a href="#!-test-B">Test B</a>
</div>
<script id="detect-ignore-colors.js">
// const TEST_COLOR = 'rgb(1, 1, 1)';
const TEST_COLOR = 'rgb(135, 135, 135)';
class DetectIgnoreColors {
constructor (intervalMs = 4000, testColor = TEST_COLOR) {
this.testColor = testColor;
this.$elem = document.createElement('div');
this.$elem.className = 'detect-ignore-colors'; // this.constructor.name;
this.$elem.style = `display:none; background-color:${this.testColor};`; // position:absolute; top:0; left:-999px;
this.$elem.textContent = ''; // 'ZZ';
// this.$elem.setAttribute('aria-hidden', 'true');
document.body.appendChild(this.$elem);
setInterval(() => this.hasIgnoreColors(), intervalMs);
this.hasIgnoreColors();
}
hasIgnoreColors () {
const STYLE = window.getComputedStyle(this.$elem);
const HAS_IGNORE = STYLE.backgroundColor !== this.testColor;
console.debug('Has ignore/inverted colors?', HAS_IGNORE, STYLE.backgroundColor);
return HAS_IGNORE;
}
}
const DIC = new DetectIgnoreColors()
</script>
<pre>
NDF, 24-Nov-2020
* https://gist.github.com/nfreear/b9d09afadf1237d2b2b7a967fa925b57;
* http://nick.freear.org.uk/2015/10/23/high-contrast-ignore-colors.html;
* Legacy :~ https://gist.github.com/nfreear/c82581b4485cd303150d;
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment