如何在Fluent UI库中通过指定核心色生成完整自定义主题

• Fluent UI React v8及以上版本原生支持该需求，无需手动实现全量色值计算逻辑，也不需要第三方依赖。
• 官方提供的createTheme函数本身就支持仅传入核心色值，会自动补全剩余的主题色阶、中性色阶，输出结构和Theming Designer的输出格式完全一致，可以直接传入ThemeProvider组件使用。

示例代码如下：

import { createTheme, PartialTheme, ThemeProvider } from '@fluentui/react';

// 入参为用户选择的三个核心色值
const generateCustomTheme = (primaryColor: string, textColor: string, bgColor: string): PartialTheme => {
  return createTheme({
    palette: {
      themePrimary: primaryColor, // 主色
      neutralPrimary: textColor, // 文本色
      white: bgColor, // 背景色
    },
    // 如果用户选择的是暗色主题，额外添加以下配置即可自动适配暗色模式色阶
    // isInverted: true
  });
};

// 直接接入ThemeProvider使用
const App = () => {
  // 传入用户自定义的三个色值
  const userTheme = generateCustomTheme("#ff5460", "#ffffff", "#000000");
  return (
    <ThemeProvider theme={userTheme}>
      {/* 应用业务组件 */}
    </ThemeProvider>
  );
};

如果需要单独获取完整的调色板对象做进一步自定义调整，也可以使用框架内置的getColorPalette工具函数，传入核心色参数即可直接生成完整的palette对象，再传入createTheme即可。

内容的提问来源于stack exchange，提问作者Aravind Jaimon