SCOPE

Color mode aware styles are registered using the CSS @scope rule.

When this strategy is used, using ExampleStyle.toModifier() will apply a single example class to the target element. If the style is color mode aware, the appropriate style will automatically be applied based on the nearest ancestor with a ColorMode.cssClass class.

This is the preferred strategy, as it enables controlling style behavior entirely via CSS by toggling a class. This allows changing the color mode of a page without loading and running the entire JS bundle, which is useful for preventing a color mode flash when the color mode at export time does not match site's initial color mode.