Application-controlled themes
A theme switcher can set an attribute on the document, such as data-theme="dark", and Tailwind custom variants can style descendants based on that state.
Persist the preference
Store the user's selection in an appropriate client-side preference such as local storage and apply it early enough to avoid a visible flash between themes.
Respect system preference
If your product supports an automatic theme, use the browser's preferred color scheme as the default and let an explicit user choice override it.
ADVERTISEMENT