Salt provider
Salt provider
SaltProvider
is a required component used to change the theme, mode, density and breakpoints of your application. Refer to the getting started page for a full step-by-step implementation guide.
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.
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.
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.