W
Wasp-lang•4w ago
LifeTaker

Changing the color of the text in the Login/signup/ forgetpass pages.

I can't change the color of the text in these pages. any recommendations? knowing that the color of the buttons can be changed
9 Replies
kapa.ai
kapa.ai•4w ago
Hi @LifeTaker. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the color of the text in the Login, Signup, and Forgot Password pages in Wasp, you can customize the appearance of the Auth UI components. Here's how you can do it: 1. Create an appearance object with custom color settings:
export const authAppearance = {
colors: {
brand: '#5969b8', // blue
brandAccent: '#de5998', // pink
submitButtonText: 'white',
// Add more color customizations here
},
}
export const authAppearance = {
colors: {
brand: '#5969b8', // blue
brandAccent: '#de5998', // pink
submitButtonText: 'white',
// Add more color customizations here
},
}
2. Pass this appearance object to the Auth UI components:
import { LoginForm } from 'wasp/client/auth'
import { authAppearance } from './appearance'

export function LoginPage() {
return (
<LoginForm
appearance={authAppearance}
/>
)
}
import { LoginForm } from 'wasp/client/auth'
import { authAppearance } from './appearance'

export function LoginPage() {
return (
<LoginForm
appearance={authAppearance}
/>
)
}
You can customize various color tokens to change the text color and other aspects of the Auth UI. The full list of available tokens can be found in the Wasp GitHub repository stitches.config.js (https://github.com/wasp-lang/wasp/blob/release/waspc/data/Generator/templates/react-app/src/stitches.config.js). It's worth noting that while you can easily change the color of buttons, changing the text color might require additional customization of the appearance object. For more detailed information on customizing the Auth UI, you can refer to the Wasp Auth UI Customization docs (https://wasp-lang.dev/docs/auth/ui#customization-). If you're still having trouble changing the text color specifically, you might need to experiment with different color tokens or consider creating a custom Auth UI component for more fine-grained control over the styling. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @LifeTaker, 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?
miho
miho•4w ago
You could use CSS to target specific elements e.g. wrap the form with some known class and then target the correct text. Let me know if you need more details. @kapa.ai show us an example of that
kapa.ai
kapa.ai•4w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! I apologize for the confusion in my previous answer. You're right that we can use CSS to target specific elements for more fine-grained control over the styling. Here's an example of how you can do this: 1. First, let's wrap the LoginForm component with a div that has a specific class:
import { LoginForm } from 'wasp/client/auth'

export function LoginPage() {
return (
<div className="custom-auth-form">
<LoginForm />
</div>
)
}
import { LoginForm } from 'wasp/client/auth'

export function LoginPage() {
return (
<div className="custom-auth-form">
<LoginForm />
</div>
)
}
2. Then, you can create a CSS file (e.g., auth.css) and add styles to target specific elements within the form:
.custom-auth-form h1 {
color: #333333; /* Change the color of the main heading */
}

.custom-auth-form label {
color: #555555; /* Change the color of form labels */
}

.custom-auth-form input {
color: #000000; /* Change the color of input text */
}

.custom-auth-form a {
color: #0000FF; /* Change the color of links */
}
.custom-auth-form h1 {
color: #333333; /* Change the color of the main heading */
}

.custom-auth-form label {
color: #555555; /* Change the color of form labels */
}

.custom-auth-form input {
color: #000000; /* Change the color of input text */
}

.custom-auth-form a {
color: #0000FF; /* Change the color of links */
}
3. Import this CSS file in your LoginPage component:
import { LoginForm } from 'wasp/client/auth'
import './auth.css'

export function LoginPage() {
return (
<div className="custom-auth-form">
<LoginForm />
</div>
)
}
import { LoginForm } from 'wasp/client/auth'
import './auth.css'

export function LoginPage() {
return (
<div className="custom-auth-form">
<LoginForm />
</div>
)
}
This approach allows you to override the default styles of the Auth UI components. You might need to inspect the rendered HTML to find the correct selectors for the elements you want to style. Keep in mind that this method of styling is not officially documented in the Wasp Auth UI customization docs, so it might be less stable across updates compared to using the official appearance prop. However, it gives you more flexibility in styling specific elements. If you need more details or have any questions about this approach, please let me know! Auth UI docs (https://wasp-lang.dev/docs/auth/ui#auth-components) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, 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?
LifeTaker
LifeTakerOP•4w ago
i didn't solve the problem , code can be found here : https://github.com/LifeTakerSimo/saas_base
GitHub
GitHub - LifeTakerSimo/saas_base
Contribute to LifeTakerSimo/saas_base development by creating an account on GitHub.
No description
LifeTaker
LifeTakerOP•4w ago
solved
MEE6
MEE6•4w ago
Wohooo @LifeTaker, you just became a Waspeteer level 1!
miho
miho•4w ago
@LifeTaker How did you solve it 🙂 using CSS?
LifeTaker
LifeTakerOP•4w ago
added custom-form class : <div className="w-full space-y-6 backdrop-blur-sm bg-black/50 p-8 rounded-xl border-2 border-gray-800 hover:border-purple-500/50 transition-all duration-500 group custom-form"> <LoginForm appearance={authAppearance} socialLayout="vertical"/>
added file global.css file : .custom-form { color: #ffffff; /* Change the color of the main heading / } .custom-form h2, .custom-form h1{ color: #ffffff; / Change the color of the main heading */ }
miho
miho•4w ago
Nice! Good to know 😄
Want results from more Discord servers?
Add your server