backstage-theminglisted

# Backstage theming and design Two theme systems run side by side in a current Backstage app, and most theming bugs are one of them being styled while the other is not. Decide which surface you are changing before you change anything. ## Preconditions - Frontend generation known. **NFS**: `createApp` from `@backstage/frontend-defaults`, themes registered as extensions via `ThemeBlueprint` from `@backstage/plugin-app-react`. **Legacy**: `createApp` from `@backstage/app-defaults` with a `themes` array option. The theme objects are nearly identical; only registration differs. Run `backstage-repo-discovery` if unsure. - Which system owns the pixels you are changing: - `@backstage/ui` ("BUI") — CSS custom properties, `--bui-*`. Newer surfaces: entity cards, headers, tables, form controls. - `@backstage/theme` + Material UI — a JS theme object. Older plugin pages and every third-party plugin that has not migrated. A portal on a current line contains both. Styling one and declaring victory is the single most common outcome here. - `packages/app/src/index.tsx` imports `@backstage/ui/css/styles.css`. Without it no BUI token has a value and every BUI component renders unstyled. - Exact theme factory signatures (`createUnifiedTheme`, `createBaseThemeOptions`, `genPageTheme`, and the `ThemeBlueprint` input shape) read from the installed `@backstage/theme` and `@backstage/plugin-app-react` types, not from memory. - Brand assets available as real files. Do