How to Change the Overall Color Scheme of a Website
1. I would like to modify the overall color scheme of my website, which is currently set to yellow. How can I change it to blue?
2. Additionally, I am interested in adding some custom pages, such as a Sidebar component. I noticed that there are default components in the code. Where can I find information on which components are pre-set and which ones I need to create from scratch if I want to add new ones?
4 Replies
Hi @aotuman. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the provided knowledge sources do not contain specific information on how to change the overall color scheme of a website in Wasp. However, typically, this would involve modifying the CSS styles associated with your website. You might need to look into the CSS files in your project and change the color values there.
As for your second question, Wasp does provide some pre-generated components for authentication. For example, in the Setting Up Username & Password Authentication (https://wasp-lang.dev/docs/auth/username-and-pass#4-create-the-client-pages) guide, it shows how to import and use the
LoginForm and SignupForm components from wasp/client/auth.
These components are used in the Login and Signup functions respectively. If you want to add new components, such as a Sidebar, you would need to create them from scratch. You can define your React components in the src/pages/auth.tsx file or any other file in the src directory, as mentioned in the Setting Up Email Authentication (https://wasp-lang.dev/docs/auth/email#3-add-the-routes-and-pages) guide.
Remember, the provided knowledge sources do not contain all the information you might need. For more detailed instructions, you should refer to the official Wasp documentation or other relevant resources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @aotuman, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@aotuman there is no overall color scheme for the whole Wasp app, but there is one for Auth UI (Login and Signup form) and you are probblay referring to those. Check out https://wasp-lang.dev/docs/auth/ui#1-customizing-the-colors on how to customize colors there.
As for custom pages and components -> well you can do whatever you want! I am curious though, how did you create your Wasp app, did you come from usemage.ai, or from open-saas, or you created a Wasp app from scratch with some other template?
Hi,Kapa,you are stupid.
Thank you for your replay.
I am an algorithm engineer who has just started learning front-end development.
created from open-saas.
Algorithm engineer here myself! At least was 10 years ago (did competitive programming, and implemented stuff like https://github.com/Martinsos/edlib).
But was doing so much web dev on the side that I ended up creating Wasp, haven't needed much algorithms lately (although they are still fun).
All right, I hope the answers above helped, let us know if you need more clarification! The more you tell us in the question (what you tried, what you expected, what did or didn't work, ...) the easier is to answer.