Wasp•2mo ago

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•2mo 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•2mo 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•2mo 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?

LifeTakerOP•2mo 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.

LifeTakerOP•2mo ago

solved

MEE6•2mo ago

Wohooo @LifeTaker, you just became a Waspeteer level 1!

miho•2mo ago

@LifeTaker How did you solve it 🙂 using CSS?

LifeTakerOP•2mo 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•2mo ago

Nice! Good to know 😄

Gaming

Programming

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

Did you find this page helpful?