Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support theming to different colors #669

Open
wwwillchen opened this issue Jul 25, 2024 · 0 comments
Open

Support theming to different colors #669

wwwillchen opened this issue Jul 25, 2024 · 0 comments
Labels
votes needed waiting for community to upvote issue

Comments

@wwwillchen
Copy link
Collaborator

After #663 we will support dark theming, however there's still not a way to theme to different colors (e.g. use a different primary color besides blue).

There's two options:

1. Support a fixed set of color palettes

We could create CSS files for different color schemes and serve them depending on what's configured. See: https://material.angular.io/guide/theming#multiple-themes-across-separate-files

The upside is that we could curate a small set of relatively good-looking color schemes. The downside is that there's only so many color schemes we would realistically support, particularly in terms of combinations.

2. Support dynamically setting the color palette

This would be quite a bit of effort unless Angular Material provided a simpler way of generating a color palette from a single color. See: angular/components#29104

https://github.com/angular/components/blob/main/src/material/core/tokens/m3/definitions/_md-sys-color.scss

This is similar, IIUC, to how Gradio does theming https://www.gradio.app/guides/theming-guide which extensively uses CSS variables, and in particular uses a few color CSS variables to generate variants for the rest.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
votes needed waiting for community to upvote issue
Projects
None yet
Development

No branches or pull requests

1 participant