Use SaltProvider to change the theme of your application with the theme prop. You can pass in multiple theme names if needed, just like className.

Use the useTheme hook to access the currently active theme.

Use the mode prop to change the mode for all nested components. Modes enable the color palette to change from light to dark. You can read more about it on the modes foundation page. The default mode is light mode.

You can use the mode toggle at the top of this page to change the mode in the example. Note how the card background and text change.

Use the useTheme hook to access the current mode.

Use the density prop to change the density for all nested components. Density controls the amount of content that can fit on a screen based on the size and spacing of components. You can read more about it on the density foundation page. The default density is medium.

You can use the density toggle at the top of this page to change the density and see how the spacing changes between the squares.

Use the useDensity hook to access the current density.

Use the breakpoints prop to customize the CSS media queries that hooks such as useBreakpoints and useCurrentBreakpoint use internally. You can use these hooks for the responsive props to pass multiple values (one per breakpoint) or a single value that would take affect across all screen sizes. You can read the responsiveness foundation page for more information about Salt's default breakpoints.

Use the useBreakpoints hook to access the current breakpoints defined via the Salt Provider. This is a low-level hook used internally in other hooks.

You can use SaltProvider to create scoped themes, allowing you to mix themes, modes, densities and breakpoints in your application. Familiarize yourself with the guidance on our foundations pages, where we recommend that you use this sparingly. Nested providers will inherit values from parent providers.