Feature Request: Add multiple color themes / gradients for personalization

[marcelweikum]

There could be an option for changing the color theme / gradient.

At the moment the color for the home screen as well as the buttons and graphs is an orange gradient but there could me more colors / gradients to choose from to get a personalized experience.

[marcelweikum]

Hey Victor,

I can try to implement this feature myself. However, I have a few questions:

There are two contrast colors: A gradient on the HomeScreen as shown below https://github.com/victorbalssa/abacus/blob/31b3515892da7e59f85e8b9fc8728d7a5f76d2fe/src/components/Screens/HomeScreen.tsx#L596 and one color for the switches, buttons and graphs, typically colors.brandStyle with small exceptions like the input fields: https://github.com/victorbalssa/abacus/blob/31b3515892da7e59f85e8b9fc8728d7a5f76d2fe/src/components/UI/ALibrary/AInput.tsx#L66-L67

I have the following questions:

Can I make the colors on the HomeScreen variable and integrate them into colors.ts? Additionally, can I create multiple different colors for the user to choose from?

For example:

colors={colorScheme === 'light' ? [colors.gradientOrangeLight1, colors.gradientOrangeLight2, colors.gradientOrangeLight3, colors.gradientOrangeLight4] : [colors.gradientOrangeDark1, colors.gradientOrangeDark2, colors.gradientOrangeDark3, colors.gradientOrangeDark4]}

or

colors={colorScheme === 'light' ? [colors.gradientBlueLight1, colors.gradientBlueLight2, colors.gradientBlueLight3, colors.gradientBlueLight4] : [colors.gradientBlueDark1, colors.gradientBlueDark2, colors.gradientBlueDark3, colors.gradientBlueDark4]}

instead of:

colors={colorScheme === 'light' ? ['rgb(255,211,195)', 'rgb(255,194,183)', 'rgb(248,199,193)', 'rgb(255,228,194)'] : ['#790277', '#d30847', '#FF5533', '#efe96d']}

Can I also create different versions for brandStyle to allow for personalization?

For example:

color.brandStyleOrange
color.brandStyleBlue
color.brandStyleGreen

instead of:

color.brandStyle

I would add a new tab in the Configuration Screen where the user can select which colors they want as their theme.

[victorbalssa]

@marcelweikum Yes! as long as we keep the actual orange color 👍🏻