@atlaskit/app-provider
Version:
A top level provider for the Design System.
43 lines (42 loc) • 1.23 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useSetTheme = useSetTheme;
var _react = require("react");
var _theme = require("../context/theme");
/**
* __useSetTheme()__
*
* Returns a function that partially updates the theme settings for the nearest
* `ThemeProvider` in the React tree.
*
* Pass a partial `Theme` object to update one or more theme slots (`light`,
* `dark`, `spacing`, `typography`). Unspecified slots will retain their current
* values. The updated theme is merged with the existing theme state.
*
* This hook must be called from within a `ThemeProvider` (or `AppProvider`).
* It throws if no `ThemeProvider` is found in the tree.
*
* @returns A setter function that accepts a partial `Theme` object.
*
* @example
* ```tsx
* function ThemeSwitcher() {
* const setTheme = useSetTheme();
*
* return (
* <button onClick={() => setTheme({ light: 'light', dark: 'dark' })}>
* Reset to default theme
* </button>
* );
* }
* ```
*/
function useSetTheme() {
var value = (0, _react.useContext)(_theme.SetThemeContext);
if (!value) {
throw new Error('useSetTheme must be used within ThemeProvider.');
}
return value;
}