How to Detect MAC Os Inverted Color Mode in JavaScript/Css

How to detect MAC OS inverted color mode in JavaScript / CSS?

you can do this in safari technical preview right now:

@media (inverted-colors) {
    img.cancel-inversion {
        filter: invert(1);
    }
}

you should use this on:

• photographs
• .icns-ish icon images (things like app icons are okay)

you should not use this on:

• images of text (I mean, you shouldn't use images of text, but if you must for some reason... don't use this technique on those images!)
• decorative images
• monochrome glyphs (things that look like font icons)

while we're on this subject reduce motion media query is in safari technical preview right now as well.

How do I detect if a user has Mac OS high contrast accessibility settings enabled?

Iam afraid it is not possible its at this moment.

The feature in Objective-C to determine if the accessibility mode is active (boolean AXAPIEnabled(void);) has been deprecated as of 10.9 with no indication that there is a replacement. You can see it on the Apple Developer site. By extension, if developers at that level of the system no longer have access, I expect web developers would also be restricted (just as AppleScript writers seem to not have access).

In general, testing for the presence of assistive technology or activation of assistive features is frowned upon by the users who need it most. It creates the very real risk of both well-intentioned developers breaking these features (perhaps by un-verting the page) and also of allowing bad actors to determine somebody's personal health information.

Altought it might come in future as its in stage 5 (proposal)
https://drafts.csswg.org/mediaqueries-5/#prefers-contrast

Other than that Iam afraid you are facing dead end.

How to detect if the OS is in dark mode in browsers?

The new standard is registered on W3C in Media Queries Level 5.

NOTE: currently only available in Safari Technology Preview Release 68

In case user preference is light:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

In case user preference is dark:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

There is also the option no-preference in case a user has no preference. But I recommend you just to use normal CSS in that case and cascade your CSS correctly.

EDIT (7 dec 2018):

In Safari Technology Preview Release 71 they announced a toggle switch in Safari to make testing easier. I also made a test page to see the browser behaviour.

If you have Safari Technology Preview Release 71 installed you can activate through:

Develop > Experimental Features > Dark Mode CSS Support

Then if you open the test page and open the element inspector you have a new icon to toggle Dark/Light mode.

---

EDIT (11 feb 2019):
Apple ships in the new Safari 12.1 dark mode

---

EDIT (5 sep 2019):
Currently 25% of the world can use dark mode CSS. Source: caniuse.com

Upcoming browsers:

• iOS 13 ( I guess it will be shipped next week after Apple's Keynote)
• EdgeHTML 76 (not sure when that will be shipped)

---

EDIT (5 nov 2019):
Currently 74% of the world can use dark mode CSS. Source: caniuse.com

---

EDIT (3 Feb 2020): Microsoft Edge 79 supports dark mode. (released on 15 Jan 2020)

My suggestion would be: that you should consider implementing dark mode because most of the users can use it now (for night-time users of your site).

Note: All major browsers are supporting dark mode now, except: IE, Edge

---

EDIT (19 Nov 2020):
Currently 88% of the world can use dark mode CSS. Source: caniuse.com

CSS-framework Tailwind CSS v2.0 supports dark-mode. (released on 18 Nov 2020)

---

EDIT (2 Dec 2020):

Google Chrome adds Dark Theme emulation to Dev Tools. Source: developer.chrome.com

---

EDIT (2 May 2022):

Currently 90% of the world can use dark mode CSS. Source: caniuse.com

Invert Button colors on hover using JavaScript & CSS

Try to set invert value to 1 instead of button

.invertedButton {
  filter: invert(1);
}

and try to use mouseenter instead mouseover because mouseover is triggered many times while mouseenter is triggered only once when cursor gets over button

invertLink.addEventListener('mouseover', toggleDark);

Solution using css only

.button:hover{
  filter: invert(1);
}

How to get Chrome to respond to Windows 10 high contrast mode using javascript/typescript in a React app

Here is what I've tried but it doesn't get applied in Chrome

How to get Chrome to respond to Windows 10 High Contrast mode:

Chrome does its own thing with its High Contrast Extension. This extension doesn't respond to Windows 10 High Contrast mode!

Chrome also won't respond to the ms-high-contrast media queries, which are for IE and Edge Legacy only.

However, you can detect if Chrome's High Contrast Extension is enabled via TypeScript like this:

const htmlTag: HTMLElement = document.getElementsByTagName('html')[0];
const isUsingChromeHighContrastExtension: boolean =
    htmlTag.getAttribute('hc') !== null;

Now you have a boolean, isUsingChromeHighContrastExtension, that you can use to adjust your styling based on whether the extension is enabled.

Note that Chrome's High Contrast Extension doesn't have a black on white or a white on black setting, but it does have a variety of other options that some visually impaired people benefit from.

Related:

How to detect if high contrast is enabled for TypeScript detection of high contrast in other browsers/platforms as well.

Targeting Firefox

How to programmatically enable -ms-high-contrast media query?

Since media queries are automatic (based on browser conditions) you need to emulate that block in your CSS but apply and remove it based on a user interaction.

It seems to me that you should simply write the styles to emulate IE's high contrast mode and then toggle a class on the document (probably body) when you click a button.

Put your new class and sub definitions at the bottom of your CSS so you know they'll override previous properties.

For example:

h2 {  font-size: 14px;  color: #dddddd;}/* overrides a normal h2 when highContrast class is added to the body *//* use a post processor (LESS/SCSS) to easily nest elements */body.highContrast h2 {  font-size: 18px;  color: #000;  font-weight: bold;}

Inverted logo based on background colour

You have to use classes and not id's because there must be only one item in the document having a same id, contrary to class.

About the script: the idea is to iterate over all the sections .white or .black and get the top and bottom for each one, which will allow you while handling scrolling event to verify if your logo is inside a given section (between the section's top and bottom positions)

Edit: I add this code (with pure javascript) to my comment.

const whites = [...document.querySelectorAll('.white')].map(e => ({    top: e.getBoundingClientRect().top,    bottom: e.getBoundingClientRect().bottom}));
//If you have a logic of only white and black sections, you can omit blacks, else you can use them
// const blacks = [...document.querySelectorAll('.black')].map(e => ({top: e.top, bottom: e.bottom}));
const logo = document.querySelector('#logo');
document.addEventListener('scroll', () => {    let position = (logo.getBoundingClientRect().bottom + logo.getBoundingClientRect().top) / 2 + window.scrollY;    for (let i = 0; i < whites.length; i++) {        if (position >= whites[i].top && position <= whites[i].bottom) {            logo.classList.remove('whiteLogo');            logo.classList.add('blackLogo');            return;        }    }
    logo.classList.remove('blackLogo');    logo.classList.add('whiteLogo');});

*,html,body {    margin: 0;    padding: 0;}
section {    height: 200px;}
.black,.blackLogo {    background: black;}
.white,.whiteLogo {    background: white;}
#logo {    position: fixed;    top: 0;    left: 0;    height: 50px;    width: 50px;}

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head>
<body>    <div id="logo" class="whiteLogo"></div>    <section class="black"></section>    <section class="white"></section>    <section class="black"></section>    <section class="black"></section>    <section class="white"></section>    <section class="black"></section></body>
</html>

---

Related Topics