打造我们公司专属的Backstage：推荐主题定制指南

6 月 27, 2026

—

大家好！今天我们将深入探讨“主题定制”，这是决定Backstage用户体验最重要的因素之一。🎨

Backstage不仅仅是一个提供功能的工具，它更应该是一个能够投射我们公司品牌形象的平台。虽然默认提供的主题也很出色，但根据公司的Logo颜色或设计指南来更改主题，对于提升开发人员的归属感起着重要作用。我们将分步为您完美整理Backstage推荐的主题定制技术！💡

🏗️ Backstage主题系统基础：Material UI

Backstage的UI是基于Material UI (MUI)构建的。因此，定制主题意味着利用MUI的主题系统。

Backstage主要提供两种级别的定制方式。

Light/Dark模式切换及基本颜色更改
完全自定义主题的创建与应用

🌟 1步：基本颜色和字体定制（推荐方式）

最推荐的方式是使用Backstage提供的createUnifiedTheme函数。此函数将MUI主题扩展以满足Backstage的特殊要求。

✅ 主要设置项

Palette: 指定主色(Primary)、辅助色(Secondary)、背景色等。
Typography: 设置字体家族、大小、粗细等。
Default Page Themes: 定义Backstage特有的头部渐变等。

🛠️ 2步：实际代码应用（包：packages/app）

主题工作在前端应用packages/app文件夹内进行。

📝 自定义主题定义示例 (src/theme/myTheme.ts)

TypeScript

import { createUnifiedTheme, themes } from '@backstage/theme';

export const myCustomTheme = createUnifiedTheme({
  palette: {
    ...themes.light.palette,
    primary: {
      main: '#3498db', // 我们公司的主蓝色！
    },
    secondary: {
      main: '#2ecc71',
    },
  },
  fontFamily: 'Roboto, Arial',
  /* 可以额外定义头部主题等 */
});

📝 在应用中注册主题 (src/App.tsx)

必须将定义的主题注册到App.tsx的createApp函数中。

TypeScript

import { myCustomTheme } from './theme/myTheme';

const app = createApp({
  apis: ...,
  themes: [
    {
      id: 'my-theme',
      title: 'Company Theme',
      variant: 'light',
      Provider: ({ children }) => (
        <ThemeProvider theme={myCustomTheme}>
          {children}
        </ThemeProvider>
      ),
    },
    // 也可以同时保留现有的深色主题等。
  ],
});

🎨 3步：按页面定制头部主题（高级）

Backstage提供根据实体类型（Service、API、Website等）改变顶部头部颜色或图案的功能。这使得用户可以直观地了解当前正在查看哪种类型的资源。

Shape: 选择头部所需的几何图案。
Colors: 指定用于渐变的颜色组合。

💡 主题定制时务必记住的提示！

遵守可访问性： 更改颜色时，务必确保文本和背景之间有足够的对比度。♿
保持一致性： 所有插件共享相同的主题，因此应避免在特定屏幕上显得突兀的颜色。
考虑深色模式： 不要只创建浅色模式！开发人员热爱深色模式。🌙

🏁 结论：主题是开发者体验的开始

Backstage推荐的主题定制技术的核心是通过createUnifiedTheme扩展MUI主题，并将其注册到应用的themes数组中。

使用此方法，Backstage的所有核心组件和插件将立即应用一致的样式。现在就开始设计您公司独有的开发者门户吧！🚀