storybook-theme-css-vars/dist/cjs/theme/ThemeSwitcher.js

Theme switcher tool addon that changes the theme using CSS custom properties

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThemeSwitcher = void 0;

var _react = _interopRequireDefault(require("react"));

var _components = require("@storybook/components");

var _constants = require("../constants");

var _Icons = require("./Icons");

var _useTheme2 = require("./useTheme");

var _api = require("@storybook/api");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var ThemeSwitcher = function ThemeSwitcher() {
  var theme = (0, _api.useParameter)(_constants.PARAM_THEME, _constants.DEFAULT_PARAMS);

  var _useTheme = (0, _useTheme2.useTheme)(theme),
      isDark = _useTheme.isDark,
      toggleMode = _useTheme.toggleMode;

  return /*#__PURE__*/_react["default"].createElement(_components.IconButton, {
    key: _constants.TOOL_ID,
    title: "Change theme mode",
    onClick: toggleMode
  }, isDark ? /*#__PURE__*/_react["default"].createElement(_Icons.SunIcon, null) : /*#__PURE__*/_react["default"].createElement(_Icons.MoonIcon, null));
};

exports.ThemeSwitcher = ThemeSwitcher;