Scoped Theming with Custom Properties
Both sections use the exact same CSS. Only the data-theme attribute changes.
Light Section (default)
This section inherits the default custom property values. Links look like this.
Cards use --color-surface for their background.
Second Section
Click the button above to apply data-theme="dark" to this section. Links adapt
too.
The same CSS, completely different appearance.
This demo uses JavaScript for the interactive controls. The CSS concepts being demonstrated don't require JavaScript.