💬 RFC: Backstage Themes Repository

[tudi2d]

🔖 Need

There is an interest in sharing themes & getting visual inspiration from the community [1][2]. The Backstage Figma has a lot of traction (~25k visits, ~900 likes). There are community hacks & articles floating around in the internet (e.g. Codesandbox, Frontside Article, Custom Theme Repository) giving first-aid help to customising theming & UI. @timbonicus ’s awesome Aperture Science Theme on the Demo Instance is the only real example of Theme Customization on the open, which people still refer to [3] as it makes their life easier & allows quicker customisations. As the #visual-design channel grows there might be the need for a more formal place for discussions around theming & custom designs.

🎉 Proposal

Create a separate repository in the Backstage GitHub Organisation dedicated for ready-to-use theme packages as well as Documentation (or even Blog Posts) around those themes, theming in Backstage & inspiration for visual customization.

For the beginning a collection of packages, which have to be manually copied over into their own instance could be sufficient. The goal should be though to maintain separate packages for different themes such that we would be able to bundle them into packages & potentially publish them allowing adopters to simply install & import a theme leading to a future where packages could be installed on the flight (e.g. from a Admin UI) without any code changes required (depends on “Declarative Integration” outcome).

It would be useful to have a simple Backstage instance with only core plugins as well as a Storybook alongside the theming packages allowing people who are not familiar with MUI or Backstage Theming to get a better understanding of the impact on the UI.

"Suggested Repository Folder Structure" attached at the end of the RFC

〽️ Alternatives

• No change - keeping it the current way to avoid fragmentation of the project & run into a maintainance bottleneck
• A highly customizable theme shipped by default
• Expect Themes to live in separate repositories outside of the Backstage Organisation (e.g. like done here https://github.com/protoku/backstage-theme)
• Wait for Component Customization RFC (💬 RFC: Component Composability in Frontend Plugins #16876) before tackling this

❌ Risks

Customizsation: There is a potential risk of conflict with component “Customization” (#16876) as Theming can be seen as just one way of changing the UI. It might require to have a super narrow scope not allowing custom components in this repository for a certain themes (e.g. complex changes to the Sidebar or EntityLayout).

Design: I'm not a designer & don't have enough experience with the design workflow. There might be specific Design resources/tools, like Figma templates, which I’m missing out on here. I would be open to discuss if this repository could be a good place to host such resources as well.

---

Suggested Repository Folder Structure:

theming/
├  docs/
├  themes/
│  ├  aperture/
│  │  ├  components/   (Complex Theme components (e.g. custom Sidebar))
│  │  ├  theme/        (optional: for complex themes to split up things e.g. in overrides.ts, palette.ts, ...)
│  │  ├  index.ts      (export Theme config, which can be added to `themes` array in `createApp`
├  demo/               (optional: Demo Backstage Frontend )
├  storybook/          (optional: Backstage Storybook)

👀 Have you spent some time to check if this RFC has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[Rugvip]

Separate repo with themes sounds like a great idea! 👍 When it comes to publishing packages that might be a bit tricky, at least if we want to use @backstage. We could figure that out as we go though, perhaps just starting with a minimal collection of themes that you would just copy paste? I would see this as a great resource for people that want to create their own theme too, to have more examples and starting points. Let us know if this is something you want to drive and we can shape some plan and set things up.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[efenner-cambia]

Did the themes repo get created? I would still love to see some other theme examples!

[tudi2d]

@efenner-cambia As there was no reaction/traction on this RFC I assumed that there is no need/interest in this. Still think more default themes would be super helpfull. Feel free to leave feedback here so it can be referenced in the future.

[efenner-cambia]

I would be interested in more default themes or a repo of some theme configs, just to have more examples and inspiration!

[kurtaking]

It's a bummer this didn't gain traction. I am subscribed now in the event the RFC gets resurrected 😄

+1 to @efenner-cambia's message.

[tudi2d]

Appreciate it! In the meantime I created https://github.com/tudi2d/backstage-theme-creator/ & #21504, which goes into a similar direction I would say. Might be interesting to both of you as well!:)