forced-color-adjust · Properties · CSS

The forced-color-adjust CSS property allows authors to opt particular elements out of forced colors mode, restoring full control over the colors to CSS.

Syntax

CSS

forced-color-adjust: value;

JS

object.style.forcedColorAdjust = "value";

Values

<'forced-color-adjust'> = auto | none | preserve-parent-color

auto

Automatically specified by the user agent.

none

Not automatically specified by the user agent.

preserve-parent-color

If the color property inherits from its parent, then it computes to the used color of its parent’s color value. In all other respects, it behaves the same as none.

Initial

auto

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: lightyellow;
            border-color: yellow;
            border-style: solid;
            border-width: 10px;
            padding: 10px;
        }
        p
        {
            background-color: inherit;
            border-color: inherit;
            border-style: solid;
            border-width: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button onmouseover="myfunction(innerHTML)">initial</button>
    <button onmouseover="myfunction(innerHTML)">auto</button>
    <button onmouseover="myfunction(innerHTML)">none</button>
    <button onmouseover="myfunction(innerHTML)">preserve-parent-color</button>
    <div>
        <p>forced-color-adjust</p>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const myelements = document.querySelectorAll("div, p");
            for(let myelement of myelements)
            {
                myelement.style.forcedColorAdjust = myparameter;
            }
        }
    </script>
</body>
</html>

5 · JS · Internal

<!doctype html>
<html>
<head>
    <style>
        div
        {
            background-color: lightyellow;
            border-color: yellow;
            border-style: solid;
            border-width: 10px;
            padding: 10px;
        }
        p
        {
            background-color: inherit;
            border-color: inherit;
            border-style: solid;
            border-width: 10px;
            padding: 10px;
        }
    </style>
</head>
<body>
    <button>initial</button>
    <button>auto</button>
    <button>none</button>
    <button>preserve-parent-color</button>
    <div>
        <p>forced-color-adjust</p>
    </div>
    <script>
        function myfunction(myparameter)
        {
            const myelements = document.querySelectorAll("div, p");
            for(let myelement of myelements)
            {
                myelement.style.forcedColorAdjust = myparameter;
            }
        }
        const myelements = document.querySelectorAll("button");
        for(let myelement of myelements)
        {
            myelement.addEventListener("mouseover", function(){myfunction(myelement.innerHTML)});
        }
    </script>
</body>
</html>