search

NitinNair89 / TheHungryRecipesApp

A food recipes website with simple UI
https://thehungryrecipes.netlify.app/
GNU General Public License v3.0
14 stars 18 forks source link

Theming #17

Open NitinNair89 opened 4 years ago

NitinNair89 commented 4 years ago

Is your feature request related to a problem? Please describe. FEATURE. Theme feature would be nice to have. User can select and apply a color theme for the entire web-app.

Describe the solution you'd like The overall UI of the web-app can be changed via themes. It would be a setting on the User Dashboard page. Theming can be done using core CSS without using any additional plugins.

If you are interested to work on this issue, please comment below so I can assign it to you.

priyanshupardhi commented 4 years ago

@NitinNair89 did you mean White/Dark theme?

NitinNair89 commented 4 years ago

@priyanshupardhi

Kind of but not exactly. Currently the entire application is following a shade of green as the main theme. So I was thinking maybe we could add an option in the User Dashboard so users can select the theme/colors they want as per their convenience.

Dark mode is not what I would prefer currently because, most of the users would watch videos while cooking instead of reading the recipe instructions. But it would be good to have as part of the theme too. :slightly_smiling_face:

If you have other thoughts and ideas, feel free to share. If you would like to work on this, let me know so I can assign you.

Kabiirk commented 3 years ago

Hey Nitin,

I had a few ideas for theming, instead of standard Dark/Light themes we could go for something food-related for e.g. : Veg. : the default Green theme Non-Veg. : redd-ish hues Tuesday-thursday waale : idk purple maybe (not sure about this)

Note: These are just some names I came up with off the top of my head, their name and corresponding colors can be ideated on further

Additionally, a few observations from my side that require some clarity:

1. Theming Looking at the live website, I see that the main elements of the UI that can be styled are the main scaffold/Navbar, some buttons & the hover-items on the homepage. I would not suggest changing the whites of the website, which constitutes major area of the UI as I like the current minimal look feel it would be too 'full of color' & only be done in case we are doing a 'dark' theme (which I would not recommend for this website). Is that in line with what you want in your theming ?

2. Option to change themes Since the dashboard is a separate issue being worked on (and since I am a novice in angular). I think just a dropdown button or something similar on the scaffold/Navbar should work as it gives the user easier access to themes, instead of a separate option on a dashboard. So, would creating an option to change theme on the Scaffold/Navbar is acceptable for you ?

Let me know what can be provided to me(apart from the public source code) & is required from my side.

Regards, KabiirK

P.S. Accounting for difference in our terminologies, this is the UI Element I am referring to as Scaffold/Navbar. image

NitinNair89 commented 3 years ago

Hi @Kabiirk Yup, I had similar thoughts. Let's start with veg/nonveg colour shades. And yes the minimal UI was intentionally done and making the app colourful might affect the look-and-feel it currently has.

Definitely agree for not doing the dark mode theme because of the usage factor of the app.

You can refer React-Material UI website. They provide a color selection in the Navbar. Maybe we can do something similar. Thoughts?

You can start working on it and if needed please create sub-tasks/cards in the Project section of the repository.

Kabiirk commented 3 years ago

@NitinNair89

Veg/Non-veg should be fine for now. We can maybe implement a 3rd Theme before closure of the issue ?

Yeah, we can refer to react MUI for maybe effective guidelines, but colors I am gonna have to 'eyeball' whether they look good or not.

Lemme see what I can come up with. Is there any discord/slack/etc. channel for this project that I can join for faster communications/opinions on theme ?

NitinNair89 commented 3 years ago

@NitinNair89

Veg/Non-veg should be fine for now. We can maybe implement a 3rd Theme before closure of the issue ?

Yeah, we can refer to react MUI for maybe effective guidelines, but colors I am gonna have to 'eyeball' whether they look good or not.

Lemme see what I can come up with. Is there any discord/slack/etc. channel for this project that I can join for faster communications/opinions on theme ?

Sure, go ahead. You can reach me on Discord directly, this project itself doesn't have a discord server. Maybe in the future, we might have one.

NitinNair89 commented 3 years ago

Update: Basic theming implementation has been achieved, thanks to @Kabiirk.

I'm keeping this issue open, just in case for future references.