More theming support #358

Open
opened 2026-04-05 07:37:46 -05:00 by AndusDEV · 5 comments
AndusDEV commented 2026-04-05 07:37:46 -05:00 (Migrated from github.com)

Describe your idea for an enhancement:

I would love to customize VoidAuth more than just it's leading color. It would be great to either have a selection of themes to pick (like Catppuccin color palletes for example), or have control over more colors than just one to input the whole color pallete by HEX color codes.

Describe alternatives you've considered:

Setting APP_COLOR variable. It's a good solution and it would be great to still have it for people that don't want to customize their instance that much.

Additional context:

Maybe there could be a variable APP_THEME to pick from either "basic" or "advanced", where basic would look for APP_COLOR, while advanced would look for multiple variables to use as a whole color pallete.

### Describe your idea for an enhancement: I would love to customize VoidAuth more than just it's leading color. It would be great to either have a selection of themes to pick (like Catppuccin color palletes for example), or have control over more colors than just one to input the whole color pallete by HEX color codes. ### Describe alternatives you've considered: Setting APP_COLOR variable. It's a good solution and it would be great to still have it for people that don't want to customize their instance that much. ### Additional context: Maybe there could be a variable APP_THEME to pick from either "basic" or "advanced", where basic would look for APP_COLOR, while advanced would look for multiple variables to use as a whole color pallete.
notquitenothing commented 2026-04-12 22:11:06 -05:00 (Migrated from github.com)

Thank you for opening an issue! I like this idea, right now the APP_COLOR just feeds into angular-material's theme engine, which generates a palette of colors to use throughout the app. This is why colors shown sometimes do not match exactly the APP_COLOR, the color used is selected off of the palette for readability and contrast. The theming engine also supports secondary and ternary colors but it seems they are not used automatically, I would have to designate that certain buttons/text are not supposed to be the primary color. All this to say that I am not sure how to approach adding additional theming options right now, but if anyone has any ideas feel free to suggest them.

You may also be able to leverage custom css configuration. You should be able to place custom css in the config/branding/custom.css file.

Thank you for opening an issue! I like this idea, right now the APP_COLOR just feeds into angular-material's theme engine, which generates a palette of colors to use throughout the app. This is why colors shown sometimes do not match exactly the APP_COLOR, the color used is selected off of the palette for readability and contrast. The theming engine also supports secondary and ternary colors but it seems they are not used automatically, I would have to designate that certain buttons/text are not supposed to be the primary color. All this to say that I am not sure how to approach adding additional theming options right now, but if anyone has any ideas feel free to suggest them. You may also be able to leverage custom css configuration. You should be able to place custom css in the `config/branding/custom.css` file.
AndusDEV commented 2026-04-18 01:17:31 -05:00 (Migrated from github.com)

I didn't know that custom.css existed sorry! It helped me with making the whole app color pallete look similar to the rest of my apps. I still think however that adding something like secondary and tertiary color as environment variables would be a nice option. Maybe for people that wouldn't want to play around with CSS too much

I didn't know that custom.css existed sorry! It helped me with making the whole app color pallete look similar to the rest of my apps. I still think however that adding something like secondary and tertiary color as environment variables would be a nice option. Maybe for people that wouldn't want to play around with CSS too much
notquitenothing commented 2026-04-18 07:44:52 -05:00 (Migrated from github.com)

After thinking about it some more, I could probably do something like APP_COLOR_BACKGROUND that behaves the same as APP_COLOR but only changes the background tint of the page and maybe form cards. Would that have mostly covered your use-case?

After thinking about it some more, I could probably do something like APP_COLOR_BACKGROUND that behaves the same as APP_COLOR but only changes the background tint of the page and maybe form cards. Would that have mostly covered your use-case?
AndusDEV commented 2026-04-18 07:57:23 -05:00 (Migrated from github.com)

I mean I did change a lot of the classes in my Custom CSS, but background would definitely help, and be enough for most people. I can send you the code (or a list of classes) when I come back home if that helps

I mean I did change a lot of the classes in my Custom CSS, but background would definitely help, and be enough for most people. I can send you the code (or a list of classes) when I come back home if that helps
spin-drift commented 2026-05-27 01:27:50 -05:00 (Migrated from github.com)

I mean I did change a lot of the classes in my Custom CSS, but background would definitely help, and be enough for most people. I can send you the code (or a list of classes) when I come back home if that helps

I'm personally interested in this! I love the default theme, but might want to tweak a couple things.

> I mean I did change a lot of the classes in my Custom CSS, but background would definitely help, and be enough for most people. I can send you the code (or a list of classes) when I come back home if that helps I'm personally interested in this! I love the default theme, but might want to tweak a couple things.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
adam/gate#358
No description provided.