diff --git a/node/flags.js b/node/flags.js
index 1759b4d9..a636a204 100644
--- a/node/flags.js
+++ b/node/flags.js
@@ -21,7 +21,8 @@ exports.Features = {
   DoublePositionGradients: 131072,
   VendorPrefixes: 262144,
   LogicalProperties: 524288,
+  LightDark: 1048576,
   Selectors: 31,
   MediaQueries: 448,
-  Colors: 64512,
+  Colors: 1113088,
 };
diff --git a/node/targets.d.ts b/node/targets.d.ts
index c962f229..ccc7c95f 100644
--- a/node/targets.d.ts
+++ b/node/targets.d.ts
@@ -33,7 +33,8 @@ export const Features: {
   DoublePositionGradients: 131072,
   VendorPrefixes: 262144,
   LogicalProperties: 524288,
+  LightDark: 1048576,
   Selectors: 31,
   MediaQueries: 448,
-  Colors: 64512,
+  Colors: 1113088,
 };
diff --git a/scripts/build-prefixes.js b/scripts/build-prefixes.js
index 0c475f42..0834ecb2 100644
--- a/scripts/build-prefixes.js
+++ b/scripts/build-prefixes.js
@@ -465,9 +465,10 @@ let flags = [
   'DoublePositionGradients',
   'VendorPrefixes',
   'LogicalProperties',
+  'LightDark',
   ['Selectors', ['Nesting', 'NotSelectorList', 'DirSelector', 'LangSelectorList', 'IsSelector']],
   ['MediaQueries', ['MediaIntervalSyntax', 'MediaRangeSyntax', 'CustomMediaQueries']],
-  ['Colors', ['ColorFunction', 'OklabColors', 'LabColors', 'P3Colors', 'HexAlphaColors', 'SpaceSeparatedColorNotation']],
+  ['Colors', ['ColorFunction', 'OklabColors', 'LabColors', 'P3Colors', 'HexAlphaColors', 'SpaceSeparatedColorNotation', 'LightDark']],
 ];
 
 let enumify = (f) => f.replace(/^@([a-z])/, (_, x) => 'At' + x.toUpperCase()).replace(/^::([a-z])/, (_, x) => 'PseudoElement' + x.toUpperCase()).replace(/^:([a-z])/, (_, x) => 'PseudoClass' + x.toUpperCase()).replace(/(^|-)([a-z])/g, (_, a, x) => x.toUpperCase())
diff --git a/src/lib.rs b/src/lib.rs
index 53a1811e..92c877a2 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -28323,6 +28323,29 @@ mod tests {
         ..Browsers::default()
       },
     );
+    nesting_test_with_targets(
+      r#"
+        .foo { color-scheme: light; }
+        .bar { color: light-dark(red, green); }
+      "#,
+      indoc! {r#"
+        .foo {
+          color-scheme: light;
+        }
+
+        .bar {
+          color: light-dark(red, green);
+        }
+      "#},
+      Targets {
+        browsers: Some(Browsers {
+          safari: Some(13 << 16),
+          ..Browsers::default()
+        }),
+        include: Features::empty(),
+        exclude: Features::LightDark,
+      },
+    );
   }
 
   #[test]
diff --git a/src/properties/custom.rs b/src/properties/custom.rs
index 40b522e8..702fb724 100644
--- a/src/properties/custom.rs
+++ b/src/properties/custom.rs
@@ -1653,7 +1653,7 @@ impl<'i> UnresolvedColor<'i> {
         dest.write_char(')')
       }
       UnresolvedColor::LightDark { light, dark } => {
-        if !dest.targets.is_compatible(crate::compat::Feature::LightDark) {
+        if should_compile!(dest.targets, LightDark) {
           dest.write_str("var(--lightningcss-light")?;
           dest.delim(',', false)?;
           light.to_css(dest, is_custom_property)?;
diff --git a/src/properties/ui.rs b/src/properties/ui.rs
index 11e1eade..9b0bb714 100644
--- a/src/properties/ui.rs
+++ b/src/properties/ui.rs
@@ -1,13 +1,12 @@
 //! CSS properties related to user interface.
 
-use crate::compat::Feature;
 use crate::context::PropertyHandlerContext;
 use crate::declaration::{DeclarationBlock, DeclarationList};
 use crate::error::{ParserError, PrinterError};
 use crate::macros::{define_shorthand, enum_property, shorthand_property};
 use crate::printer::Printer;
 use crate::properties::{Property, PropertyId};
-use crate::targets::{Browsers, Targets};
+use crate::targets::{should_compile, Browsers, Targets};
 use crate::traits::{FallbackValues, IsCompatible, Parse, PropertyHandler, Shorthand, ToCss};
 use crate::values::color::CssColor;
 use crate::values::number::CSSNumber;
@@ -548,7 +547,7 @@ impl<'i> PropertyHandler<'i> for ColorSchemeHandler {
   ) -> bool {
     match property {
       Property::ColorScheme(color_scheme) => {
-        if !context.targets.is_compatible(Feature::LightDark) {
+        if should_compile!(context.targets, LightDark) {
           if color_scheme.contains(ColorScheme::Light) {
             dest.push(define_var("--lightningcss-light", Token::Ident("initial".into())));
             dest.push(define_var("--lightningcss-dark", Token::WhiteSpace(" ".into())));
diff --git a/src/targets.rs b/src/targets.rs
index 4d44ddae..6c1f429a 100644
--- a/src/targets.rs
+++ b/src/targets.rs
@@ -158,9 +158,10 @@ bitflags! {
     const DoublePositionGradients = 1 << 17;
     const VendorPrefixes = 1 << 18;
     const LogicalProperties = 1 << 19;
+    const LightDark = 1 << 20;
     const Selectors = Self::Nesting.bits() | Self::NotSelectorList.bits() | Self::DirSelector.bits() | Self::LangSelectorList.bits() | Self::IsSelector.bits();
     const MediaQueries = Self::MediaIntervalSyntax.bits() | Self::MediaRangeSyntax.bits() | Self::CustomMediaQueries.bits();
-    const Colors = Self::ColorFunction.bits() | Self::OklabColors.bits() | Self::LabColors.bits() | Self::P3Colors.bits() | Self::HexAlphaColors.bits() | Self::SpaceSeparatedColorNotation.bits();
+    const Colors = Self::ColorFunction.bits() | Self::OklabColors.bits() | Self::LabColors.bits() | Self::P3Colors.bits() | Self::HexAlphaColors.bits() | Self::SpaceSeparatedColorNotation.bits() | Self::LightDark.bits();
   }
 }
 
diff --git a/src/values/color.rs b/src/values/color.rs
index b65d16a3..093d5c12 100644
--- a/src/values/color.rs
+++ b/src/values/color.rs
@@ -595,7 +595,7 @@ impl ToCss for CssColor {
         CssColor::from(srgb).to_css(dest)
       }
       CssColor::LightDark(light, dark) => {
-        if !dest.targets.is_compatible(Feature::LightDark) {
+        if should_compile!(dest.targets, LightDark) {
           dest.write_str("var(--lightningcss-light")?;
           dest.delim(',', false)?;
           light.to_css(dest)?;
diff --git a/website/pages/transpilation.md b/website/pages/transpilation.md
index abf0ef86..12f69fc7 100644
--- a/website/pages/transpilation.md
+++ b/website/pages/transpilation.md
@@ -108,13 +108,14 @@ Here is a full list of available flags, described in the sections below:
 * `P3Colors`
 * `HexAlphaColors`
 * `SpaceSeparatedColorNotation`
+* `LightDark`
 * `FontFamilySystemUi`
 * `DoublePositionGradients`
 * `VendorPrefixes`
 * `LogicalProperties`
 * `Selectors` – shorthand for `Nesting | NotSelectorList | DirSelector | LangSelectorList | IsSelector`
 * `MediaQueries` – shorthand for `MediaIntervalSyntax | MediaRangeSyntax | CustomMediaQueries`
-* `Colors` – shorthand for `ColorFunction | OklabColors | LabColors | P3Colors | HexAlphaColors | SpaceSeparatedColorNotation`
+* `Colors` – shorthand for `ColorFunction | OklabColors | LabColors | P3Colors | HexAlphaColors | SpaceSeparatedColorNotation | LightDark`
 
 </div>