What file can i change login page colors

hi kapa in what file can i change the login page colors from yellow to another color. i use SaaS 3 template

4 Replies

Hi @Sven. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You can change the login page colors in the appearance.js or appearance.ts file, depending on whether you're using JavaScript or TypeScript. Here's an example of how you can customize the colors:

export const appearance = {  
 colors: {  
 brand: '#5969b8', // blue  
 brandAccent: '#de5998', // pink  
 submitButtonText: 'white',  
 },  
}

export const appearance = {  
 colors: {  
 brand: '#5969b8', // blue  
 brandAccent: '#de5998', // pink  
 submitButtonText: 'white',  
 },  
}

In this example, the brand color is set to blue, the brandAccent color is set to pink, and the submitButtonText color is set to white. You can replace these color codes with the ones you prefer. Then, you need to pass the appearance object to the LoginForm component in your LoginPage.jsx or LoginPage.tsx file:

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

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

For more details, you can refer to the Wasp documentation on customizing the Auth UI (https://wasp-lang.dev/docs/auth/ui#customization-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

Sven•2w ago

@kapa.ai can i also do it without making a whole new file

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you can also define the appearance object directly in your LoginPage.jsx or LoginPage.tsx file without creating a new file. Here's how you can do it:

import { LoginForm } from 'wasp/client/auth'

export function LoginPage() {
  const appearance = {
    colors: {
      brand: '#5969b8', // blue
      brandAccent: '#de5998', // pink
      submitButtonText: 'white',
    },
  }

  return <LoginForm appearance={appearance} />
}

import { LoginForm } from 'wasp/client/auth'

export function LoginPage() {
  const appearance = {
    colors: {
      brand: '#5969b8', // blue
      brandAccent: '#de5998', // pink
      submitButtonText: 'white',
    },
  }

  return <LoginForm appearance={appearance} />
}

In this example, the appearance object is defined directly in the LoginPage component. You can replace the color codes with the ones you prefer. For more details, you can refer to the Wasp documentation on customizing the Auth UI (https://wasp-lang.dev/docs/auth/ui#customization-). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Sven, 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?

Sven•2w ago

goattttt thanks

Gaming

Programming

What file can i change login page colors