Use qds-theme-switch to control the shared light, dark, and automatic theme state. Preferences persist across page loads and propagate to every switch on the page.
Each instance is bound to the same global theme manager, so a change in one switch is reflected everywhere else immediately.
Standard toggle with manual theme control and automatic system mode.
Single-button form for tighter toolbars and utility areas.
Initial auto mode state; after interaction it stays synchronized with the shared preference.
This page listens for the global qds-theme-change event and reports the resolved theme state below.
This sample surface uses only shared design tokens so it changes cleanly with the active theme.
Accent actions, text, borders, and inputs should all remain legible in both light and dark mode.