Skip to main content
/
/
/
/
Color mode picker

Color mode picker

If you're using @intility/toolkit, you can use the <ToolkitNav> component which will provide Intility-standardized top bar items, including a color mode picker.

Read docs at toolkit.intility.com

Out of the box, Bifrost will apply light or dark mode colors corresponding to current OS color mode by using the prefers-color-scheme media query.

For most apps this should be sufficient but if your app requires a manual color mode picker for some reason, you can apply .bf-darkmode or .bf-lightmode on <html>.

The following example uses use-local-storage-state npm package to persist state in localStorage.