Conversation
- Added @primer/octicons-react dependency for icon usage. - Replaced existing icons in the Sidebar with Primer Octicons for a consistent look. - Updated HomePage styles to use theme colors for better theming support. - Enhanced GitHub theme with improved typography settings and color palettes.
This commit introduces a README file detailing the app theming process using Backstage’s Unified Theming API, instructions for switching themes, and information on the integration of the GitHub design system (Primer). It includes guidance on theme tokens, CSS variable overrides, and how to avoid global styling conflicts.
This was referenced Jan 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a comprehensive theming and UI refresh to the Backstage app, focusing on brand-aligned themes, Primer (GitHub’s design system) integration, and consistent usage of design tokens. It also improves developer documentation and updates dependencies and build/test scripts. The most significant changes are grouped below.
Theming and UI Consistency
createUnifiedTheme, registered in the frontend app for user selection, and provided CSS variable overrides for Backstage UI consistency. (packages/app/src/themes/brandTheme.ts,packages/app/src/App.tsx,packages/app/src/index.tsx,packages/app/src/styles/brand.css,packages/backstage-theme-github/src/styles.css, [1] [2] [3] [4] [5]HomePage) to use theme tokens (from MUI/Backstage) instead of hardcoded colors for background, text, and borders, ensuring theme compatibility. (packages/app/src/components/home/HomePage.tsx, [1] [2] [3]Primer (GitHub Design System) Integration
@primer/reactand@primer/octicons-reactas dependencies and created a scoped demo page/component (PrimerDemoPage,PrimerDemo) to showcase Primer components without affecting global app styles. (packages/app/package.json,packages/app/src/components/PrimerDemo.tsx,packages/app/src/components/PrimerDemoPage.tsx,packages/app/src/App.tsx, [1] [2] [3] [4]packages/app/src/components/Root/Root.tsx, [1] [2] [3] [4]Documentation and Developer Experience
AGENTS.md,packages/app/README-theme.md, [1] [2]mise.toml, mise.tomlL46-R46)Dependency and Configuration Updates
package.json, package.jsonR48-R50)packages/app/package.json, packages/app/package.jsonR48-R56)These changes collectively modernize the app’s look and feel, improve maintainability, and provide a foundation for further UI/UX enhancements.