dumi-theme-antd/dist/common/ThemeSwitch/index.js

Ant Design 5.0 官网风格类似的 dumi2 主题插件

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import { FloatButton } from 'antd';
import { CompactTheme, DarkTheme } from 'antd-token-previewer/lib/icons';
import { FormattedMessage } from 'dumi';
import React from 'react';
import ThemeIcon from "./ThemeIcon";
import { jsx as ___EmotionJSX } from "@emotion/react";
var ThemeSwitch = function ThemeSwitch(props) {
  var _props$value = props.value,
    value = _props$value === void 0 ? ['light'] : _props$value,
    onChange = props.onChange;
  return ___EmotionJSX(FloatButton.Group, {
    trigger: "click",
    icon: ___EmotionJSX(ThemeIcon, null)
  }, ___EmotionJSX(FloatButton, {
    icon: ___EmotionJSX(DarkTheme, null),
    type: value.includes('dark') ? 'primary' : 'default',
    onClick: function onClick() {
      var themeValue = value.includes('dark') ? 'light' : 'dark';
      onChange([themeValue].concat(_toConsumableArray(value.filter(function (item) {
        return ['dark', 'light'].indexOf(item) < 0;
      })))); // compact 值必须放在靠后位置
    },

    tooltip: ___EmotionJSX(FormattedMessage, {
      id: "app.theme.switch.dark"
    })
  }), ___EmotionJSX(FloatButton, {
    icon: ___EmotionJSX(CompactTheme, null),
    type: value.includes('compact') ? 'primary' : 'default',
    onClick: function onClick() {
      if (value.includes('compact')) {
        onChange(value.filter(function (item) {
          return item !== 'compact';
        }));
      } else {
        onChange([].concat(_toConsumableArray(value), ['compact']));
      }
    },
    tooltip: ___EmotionJSX(FormattedMessage, {
      id: "app.theme.switch.compact"
    })
  }));
};
export default ThemeSwitch;