Commit fe0ca41

CSS variables in [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) are not currently supported, but there are open drafts to add [custom media queries](https://drafts.csswg.org/mediaqueries-5/#custom-mq) and [custom environment variables](https://drafts.csswg.org/css-env-1/) that would solve this problem! However, with the current state of support, the following will **not** work:

:root {

--breakpoint: 600px;

}

@media (min-width: var(--breakpoint)) {

/* Doesn't work :( */

}

While it is possible to easily alter a color in Sass using its built-in functions, it is currently not as easy to modify colors set in CSS Variables. This can be accomplished in CSS by splitting the [RGB](https://developer.mozilla.org/en-US/docs/Glossary/RGB) or [HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) channels and modifying each value, but it is complex and has missing functionality.

What exactly does this mean? Basically, using a CSS preprocessor, such as Sass, allows us to use functions to manipulate a single color. For example, we can create the following colors in Sass:

$background: #3880ff;

$background-shade: mix(#000, $background, 12%);

$background-tint: mix(#fff, $background, 10%);

$text: #444;

$text-darker: darken($text, 15);

$text-lighter: lighten($text, 15);

After running through the Sass compiler, the colors will have the following values:

| Variable | Value |

| --------------------| ----------------------------------------------------------|

| `$background` | <code-color mode="md" value="#3880ff"></code-color> |

| `$background-shade` | <code-color mode="md" value="#3171e0"></code-color> |

| `$background-tint` | <code-color mode="md" value="#4c8dff"></code-color> |

| `$text` | <code-color mode="md" value="#444444"></code-color> |

| `$text-darker` | <code-color mode="md" value="#1e1e1e"></code-color> |

| `$text-lighter` | <code-color mode="md" value="#6a6a6a"></code-color> |

However, because CSS variables can be set at runtime and are more dynamic, it is not currently possible to manipulate them using a simple function.

This is normally not a problem, but when an application needs to have dynamic theming it presents issues. In Ionic, this is the reason that there are [variations to each color](#layered-colors), and it is also why [stepped colors](#stepped-colors) are necessary for theming.

There are drafts and issues discussing [color modification proposals](https://github.com/w3c/csswg-drafts/issues/3187) that would make this possible.