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

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

import React from "react";
import { IconButton } from "@storybook/components";
import { DEFAULT_PARAMS, PARAM_THEME, TOOL_ID } from "../constants";
import { SunIcon, MoonIcon } from "./Icons";
import { useTheme } from "./useTheme";
import { useParameter } from "@storybook/api";
export var ThemeSwitcher = function ThemeSwitcher() {
  var theme = useParameter(PARAM_THEME, DEFAULT_PARAMS);

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

  return /*#__PURE__*/React.createElement(IconButton, {
    key: TOOL_ID,
    title: "Change theme mode",
    onClick: toggleMode
  }, isDark ? /*#__PURE__*/React.createElement(SunIcon, null) : /*#__PURE__*/React.createElement(MoonIcon, null));
};