Variable ThemeSwitcher`Const`

ThemeSwitcher: FC<ThemeSwitcherProps> = ...

A tooltip-wrapped icon button that toggles between light and dark theme modes, showing the icon for the mode it will switch to.

Param: props

The ThemeSwitcherProps (the button size).

Returns

The theme-toggle button element.

Example

<ThemeSwitcher size="medium" />
// In light mode renders a dark-mode icon; clicking calls toggleTheme().

Source

export const ThemeSwitcher: FC<ThemeSwitcherProps> = ({ size = "small" }) => {
  const { mode, toggleTheme, currentPalette } = useTheme();

  return (
    <Tooltip title={`Switch to ${mode === "light" ? "dark" : "light"} mode`}>
      <ThemeSwitcherButton
        onClick={toggleTheme}
        size={size}
        currentPalette={currentPalette}
        mode={mode}
      >
        {mode === "light" ? <DarkModeIcon /> : <LightModeIcon />}
      </ThemeSwitcherButton>
    </Tooltip>
  );
};