[Feedback] Custom themes

[MatissJanis]

TODO

• fetch theme catalog json directly from github via an async fetch call (to allow us to quickly remove themes in case it becomes buggy or else) - Refactor theme catalog fetching to use custom hook #6681
• surface error message if theme validation fails - Add error styling to ThemeInstaller component #6689
• update demo theme screenshot
• can we somehow automate capturing screenshots? so they have consistent data etc.
• replace screenshots with color palette - Replace theme screenshots with color palette preview #6722
• add a few more themes
• allow defining "mode" for the theme - is it "overrides" only? In which case: what should be the "base theme" (light? dark?). Or is the theme a "full" one? In which case there should not be any default variables. Need to think more about this.
• inheritance in custom themes? Allow using CSS variables? Something to think about - [AI] Allow var(--name) in custom theme CSS #7018
• housekeeping: reduce amount of variables; standartisation; etc
• nighly scan of all custom themes - are they still valid? if not: auto-remove them from the array - [AI] Add nightly CI scan for custom theme catalog #7566
• ability to set custom light/dark theme - [AI] Custom Themes - ability to define separate light/dark theme #7145
• themes should be attributed to either light/dark - and thus should either show in the "light" or "dark" selector; not both - Add theme mode filtering to custom theme catalog #7194
• allow setting custom font - [AI] Custom Themes: custom font family #7239
• css var inheritance in custom themes

[Juulz]

Update: added to PR #6696

Here's a new dark theme. Juulz/simple-dark

It is based on the Discourse theme Sam's Simple Dark. Here it is in my guild forum:

Here's my take:

PS - The three themes I have written are complete - not just overrides (although I did build them that way). They could be copy-pasted as a base.

[Juulz]

Next up, another light theme with a 1970s palette.

I also added --color-sidebarBudgetName to all my themes.

[MikesGlitch]

Feedback:

• I think the screenshots are too small to show anything meaningful - I can barely see them. What if we supported a larger image and allow it to be expanded/opened via an image viewer modal (or some such)?

• Edge currently has broken images due to Content Security Policy directive issues. I wonder if this will affect people running on Docker/pikapods etc.

[MatissJanis]

The screenshots are tricky indeed.. maybe we just remove them entirely? Just clicking through the themes might be sufficient. WDYT?

[MikesGlitch]

The screenshots are tricky indeed.. maybe we just remove them entirely? Just clicking through the themes might be sufficient. WDYT?

Was just thinking there, someone with bad intentions could upload any image they want.

I think we should lock it down at the very least, but as you say, it might be better to remove them. If we did remove them, maybe we could add a colour palate to the catalogue so users will know what the theme colours are.

[Juulz]

I've been putting a full image in the readme file. People could click through to see that.

[Juulz]

This is my favorite light one. I'm using it on my own budget on edge. Let me know if you want a PR for it.

1970 Theme

Juulz/1970-theme

[MatissJanis]

Keep sending PRs for themes @Juulz . We'll be happy to approve and merge :)

[youngcw]

It would be nice if themes could set the colors used by the custom report. (the bar charts, donut charts, etc). Maybe they can already but none that Ive tried have done that yet