Drawn on the Dev Companion mark, a worked example rather than the system's own. What this card documents is the two mechanisms — inlined follows the UI, linked follows the OS — and both apply to every mark in the family.
Light and darktwo mechanisms, because linked and inlined SVGs behave differently
TYPO3Soul Design System
TYPO3Soul Design System
INLINE · IN THE PRODUCT
Paste the markup. The frame is currentColor and the lines are --text-muted / --accent, so the mark follows whatever mode the UI is in — including a subtree that forces one against the OS. This is what the panes above show.
LINKED · FAVICON, TAB, README
The three files carry prefers-color-scheme and follow the OS. They cannot inherit currentColor, so their base is a mid warm grey that holds either way. Correct for anywhere the OS decides — never for a UI that sets its own mode.
In placetab strip, server list, header
Soul Design System docs.typo3.org
typo3-support-app● running
TYPO3Soul Design System