feat(media): add inverted colors custom media query (#469)

argyleink · Feb 21, 2024 · e857ce9 · e857ce9
1 parent 09e70c0
commit e857ce9
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 0 deletions.
diff --git a/docsite/index.html b/docsite/index.html
@@ -3366,6 +3366,7 @@ <h5>Preference Vars</h5>
  @custom-media --motionOK (prefers-reduced-motion: no-preference);
  @custom-media --motionNotOK (prefers-reduced-motion: reduce);
 
+ @custom-media --invertedColors (inverted-colors: inverted);
  @custom-media --forcedColors (forced-colors: active);
  </code></pre>
  </div>

diff --git a/src/props.media.css b/src/props.media.css
@@ -11,6 +11,7 @@
 @custom-media --highContrast (prefers-contrast: more);
 @custom-media --lowContrast (prefers-contrast: less);
 
+@custom-media --invertedColors (inverted-colors: inverted);
 @custom-media --forcedColors (forced-colors: active);
 
 @custom-media --portrait (orientation: portrait);

diff --git a/src/props.media.js b/src/props.media.js
@@ -12,6 +12,7 @@ export const CustomMedia = {
  "--highContrast": "(prefers-contrast: more)",
  "--lowContrast": "(prefers-contrast: less)",
 
+ "--invertedColors": "(inverted-colors: inverted)",
  "--forcedColors": "(forced-colors: active)",
 
  "--portrait": "(orientation: portrait)",