SVG theme boundaries

This hand-coded example uses one checkmark in two embedding methods. The theme menu controls the page. The component-color checkbox changes only the inline icon and the text beside both icons.

Theme Use purple in this component

Inline SVG

Ready to continue

The path uses the page's inherited color. Its currentColor follows the component override.

External SVG image

Ready to continue

The image has its own light/dark colors. Its internal media query follows the embedding element's color-scheme, but the page's purple color does not cross the image boundary.

Try the boundary

Select Light, then Dark. Both icons change between their light and dark colors.
Enable the purple component color. The inline checkmark becomes purple; the external checkmark retains its own teal palette.
Select System. Changing the operating system's preference now changes the page. A manual Light or Dark choice takes precedence.
Reload. The theme choice is saved in this browser if local storage is available; the component checkbox starts unchecked.

The checkmarks are decorative beside visible text. This demo does not submit data or save a setting to an account.

Download the external SVG · Download this complete HTML · Read the explanation