Petal elements are designed both for content on a light background as well as a dark background. When "Dark Mode" is enabled, colors used on UI elements are altered slightly to improve legibility and aesthetics. For example, paragraph text color will become white to be visible on dark background; Button borders when hovering/focusing will be lighter rather than being darker as in normal mode.
To display UI elements in "Dark Mode", simply add .dark class to any parent element to apply dark style overrides to all children elements.
To preview how Petal UI elements look in both light and dark environments, use the Dark Mode toggle switch on the top right of the Docs page here.
If your project does not have any dark background pages and think you won't be needing those bits of dark mode override code, set the @include-dark global variable to false. You'll be able to save some bytes in your compiled stylesheet file.
When using Petal modules in a web component stylesheet (importing in directly), just targeting .dark classes in parent elements won't work because of encapsulation. For a workaround, Petal provides an alternative method for targeting shadow hosts with the :host-context(.dark) pseudo class. This way Petal is able to target elements outside of the shadow DOM.
To use this method, set @include-dark global variable to true. (By default, it's set to false to use the traditional method.)