W
Wasp•7d ago
Trade4Crypto.com

How to configure light & dark mode logos

I'm having trouble understanding how to find the code that swaps between the 2 logos depending on whether dark or light mode is enabled
2 Replies
kapa.ai
kapa.ai•7d ago
Hi @Trade4Crypto.com. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, there isn't specific information about configuring separate light and dark mode logos in Wasp or automatically swapping between them based on the theme. The documentation mainly focuses on adding a single logo to the authentication UI components. However, I can provide some general guidance based on the available information: 1. You can add a logo to the Auth UI components by passing the logo prop: 
import { LoginForm } from 'wasp/client/auth'
import Logo from './logo.png'

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

export function LoginPage() {
  return (
    <LoginForm
      logo={Logo}
    />
  )
}
Auth UI Customization (https://wasp-lang.dev/docs/auth/ui#2-using-your-logo) 2. Wasp uses Stitches (https://stitches.dev/) for styling, which allows you to customize colors and other appearance aspects. You might be able to use this to create a theme-aware component for your logo, but the knowledge sources don't provide specific instructions for this. 3. If you want to implement a light/dark mode toggle, you would likely need to create a custom React component that handles the theme switching and logo swapping logic. This isn't directly supported by Wasp's built-in features based on the provided information. To implement a proper light/dark mode logo swap, you would typically need to: 1. Create a theme context or use a library like next-themes 2. Use CSS or JavaScript to detect the current theme 3. Conditionally render the appropriate logo based on the theme Unfortunately, the knowledge sources don't contain specific information on implementing this functionality in Wasp. If you need more detailed guidance, you might want to consult the official Wasp documentation or reach out to the Wasp community for support. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Trade4Crypto.com, 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?
Filip
Filip•6d ago
Hey @Trade4Crypto.com. There is no native code for this, but you can do it yourself 🙂 Just conditionally render a logo depending on the theme setting in the client storage.

Did you find this page helpful?