Change auth card colour?
Is there a way to easily do this, or do I need to customize the CSS? Every example I have seen uses next.js file strucure; are there guides to do this with react + vite (Tanstack Router)?
5 Replies
Hi @bolg55,
For changing the auth card colors, you’ll need to use custom CSS through Kinde’s hosted custom UI feature. At the moment there isn’t a simple property or theme option to change just the card color without customization.
Just to clarify, Kinde uses server-rendered JavaScript to compose custom pages, and supports templating with:
- React
- Liquid
- JavaScript
- TypeScript
If you’re using React for templating, keep in mind that this code is rendered on the server, so client-side functions (for example,
useEffect) won’t be available.
A good starting point would be to clone one of our example templates such as the Splitscape Custom UI template. It’s a fully customizable UI starter built with React Server Components, and you can now modify it to look however you like.
Let me know if you’d like more guidance on this.To clarify- can I run this as its own separate repo, or do I need to include it in my main project repo? I have tried including in my monorepo and am getting nothing but errors
Hi, you can can run this in its own repo.
I am really struggling with this. All I want to do is in dark mode, have the colour of the card be different than the default black, and use my dark mode logo. I have cloned the repo, tried changing the variables, and a bunch more and cannot get it to work. Extremely frustrated with something that should be so straight forward
Hi @bolg55 totally get the frustration, thanks for sticking with it.
If you can share the exact errors (screenshots or logs) or the repo, I can take a closer look and unblock you quickly. Feel free to post here or email it privately to support@kinde.com.