diff --git a/components/style/gecko/media_features.rs b/components/style/gecko/media_features.rs
index ca59d311ef9..157d8daf2a6 100644
--- a/components/style/gecko/media_features.rs
+++ b/components/style/gecko/media_features.rs
@@ -297,6 +297,35 @@ fn eval_forced_colors(context: &Context, query_value: Option<ForcedColors>) -> b
     }
 }
 
+/// Possible values for the inverted-colors media query.
+/// https://drafts.csswg.org/mediaqueries-5/#inverted
+#[derive(Clone, Copy, Debug, FromPrimitive, Parse, ToCss)]
+#[repr(u8)]
+enum InvertedColors {
+    /// Colors are displayed normally.
+    None,
+    /// All pixels within the displayed area have been inverted.
+    Inverted,
+}
+
+/// https://drafts.csswg.org/mediaqueries-5/#inverted
+fn eval_inverted_colors(
+    context: &Context,
+    query_value: Option<InvertedColors>,
+) -> bool {
+    let inverted_colors =
+        unsafe { bindings::Gecko_MediaFeatures_InvertedColors(context.device().document()) };
+    let query_value = match query_value {
+        Some(v) => v,
+        None => return inverted_colors,
+    };
+
+    match query_value {
+        InvertedColors::None => !inverted_colors,
+        InvertedColors::Inverted => inverted_colors,
+    }
+}
+
 #[derive(Clone, Copy, Debug, FromPrimitive, Parse, ToCss)]
 #[repr(u8)]
 enum OverflowBlock {
@@ -669,7 +698,7 @@ macro_rules! bool_pref_feature {
 /// to support new types in these entries and (2) ensuring that either
 /// nsPresContext::MediaFeatureValuesChanged is called when the value that
 /// would be returned by the evaluator function could change.
-pub static MEDIA_FEATURES: [QueryFeatureDescription; 66] = [
+pub static MEDIA_FEATURES: [QueryFeatureDescription; 67] = [
     feature!(
         atom!("width"),
         AllowsRanges::Yes,
@@ -816,6 +845,12 @@ pub static MEDIA_FEATURES: [QueryFeatureDescription; 66] = [
         keyword_evaluator!(eval_forced_colors, ForcedColors),
         FeatureFlags::empty(),
     ),
+    feature!(
+        atom!("inverted-colors"),
+        AllowsRanges::No,
+        keyword_evaluator!(eval_inverted_colors, InvertedColors),
+        FeatureFlags::empty(),
+    ),
     feature!(
         atom!("overflow-block"),
         AllowsRanges::No,
diff --git a/components/style/queries/feature_expression.rs b/components/style/queries/feature_expression.rs
index 0b3ec62218f..7a31397b989 100644
--- a/components/style/queries/feature_expression.rs
+++ b/components/style/queries/feature_expression.rs
@@ -329,6 +329,13 @@ fn disabled_by_pref(feature: &Atom, context: &ParserContext) -> bool {
             return !context.in_ua_or_chrome_sheet() &&
                 !static_prefs::pref!("layout.css.prefers-reduced-transparency.enabled");
         }
+
+        // inverted-colors is always enabled in the ua and chrome. On
+        // the web it is hidden behind a preferenc.
+        if *feature == atom!("inverted-colors") {
+            return !context.in_ua_or_chrome_sheet() &&
+                !static_prefs::pref!("layout.css.inverted-colors.enabled");
+        }
     }
     false
 }