UNPKG

chakra-ui

Version:

Responsive and accessible React UI components built with React and Emotion

94 lines (75 loc) 2.32 kB
import _extends from "@babel/runtime/helpers/esm/extends"; import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray"; /** @jsx jsx */ import { jsx, ThemeContext } from "@emotion/core"; import { ThemeProvider as EThemeProvider } from "emotion-theming"; import { createContext, useContext, useState } from "react"; import useDarkMode from "use-dark-mode"; import theme from "../theme"; // This context handles the color mode (light or dark) of the UI var UIModeContext = createContext(); var UIModeProvider = function UIModeProvider(_ref) { var overideValue = _ref.value, children = _ref.children; var _useState = useState(overideValue), _useState2 = _slicedToArray(_useState, 2), manualMode = _useState2[0], setManualMode = _useState2[1]; var manualToggle = function manualToggle() { if (manualMode === "light") { setManualMode("dark"); } if (manualMode === "dark") { setManualMode("light"); } }; var _useDarkMode = useDarkMode(false), value = _useDarkMode.value, toggle = _useDarkMode.toggle; var mode = value ? "light" : "dark"; var childContext = overideValue ? { mode: manualMode, toggle: manualToggle } : { mode: mode, toggle: toggle }; return jsx(UIModeContext.Provider, { value: childContext }, children); }; var DarkMode = function DarkMode(props) { return jsx(UIModeProvider, _extends({ value: "dark" }, props)); }; var LightMode = function LightMode(props) { return jsx(UIModeProvider, _extends({ value: "light" }, props)); }; var useUIMode = function useUIMode() { var context = useContext(UIModeContext); if (context === undefined) { throw new Error("useUIMode must be used within a UIModeProvider"); } return context; }; var ThemeProvider = function ThemeProvider(_ref2) { var theme = _ref2.theme, children = _ref2.children; return jsx(EThemeProvider, { theme: theme }, children); }; ThemeProvider.defaultProps = { theme: theme }; var useTheme = function useTheme() { var theme = useContext(ThemeContext); if (theme === undefined) { throw new Error("useTheme must be used within a ThemeProvider"); } return theme; }; export default ThemeProvider; export { UIModeProvider, useTheme, useUIMode, DarkMode, LightMode };