feat: built-in page theme updates #2788
Conversation
Codecov Report
@@ Coverage Diff @@
## beta #2788 +/- ##
==========================================
- Coverage 14.23% 14.21% -0.03%
==========================================
Files 85 85
Lines 1342 1344 +2
Branches 380 386 +6
==========================================
Hits 191 191
- Misses 1081 1083 +2
Partials 70 70
Continue to review full report at Codecov.
|
|
I really like the idea! The other pages would benefit from this as well, I think. See: https://github.com/nextauthjs/next-auth/tree/beta/src/server/pages I don't think we need individual configuration for each page, just stretch the color and logo across all of them. From your example screenshot I cannot decide if the placeholder for password is not visible because of a CSS bug, or you simply don't have a placeholder text? |
|
Yeah good call, will reuse those values across the other pages and update this PR tomorrow 👍 Regarding the Credentials placeholder, it's empty in fact. If you don't specify a placeholder value in the config, which we dont in the example dev app next-auth/src/server/pages/signin.js Lines 97 to 99 in e8a58a0 next-auth/app/pages/api/auth/[...nextauth].js Lines 58 to 62 in e8a58a0
|
|
@balazsorban44 alright so I themed the rest of the pages. I also made the fallback Credentials placeholder be "Password", I think thats a safe bet for that field, right? I didn't find a good use for the brandColor on other pages though.. Do you like the border of the card being in the brandColor?
Doesn't look so bad with this green, but I can imagine it wouldn't be so nice with other colors. |
|
Theme docs PR: nextauthjs/docs#35 |
balazsorban44
changed the title
|
colorScheme works great but I"m unable to get logo. Is there an example repo with logo? |
yes the same problem with me , no logo |
Add some very minimal customization to the built-in pages so people might not immediately need to replace them. This way they can customize some things with their brand color and add their company/project logo. We explicitly **do not** want to go overboard styling this page. This is not an authentication component library or Next.js app template!
Example:
```js
export default NextAuth({
providers: [...],
jwt: {...},
theme: {
colorScheme: 'auto',
brandColor: '#67b246',
logo: 'https://company.com/assets/logo.png'
}
})
```
Reasoning 💡
Add some very minimal customisation to the built-in signin page so people might not immediately need to replace it. This way they can customise some things with their brand color and add their company / project logo just above the card with the signin buttons. We explicitly do not want to go overboard styling this page. This is not an authentication component library or next.js app template!
Example:
Would generate this:
Signin:
Signout:
Error:
Verify Request:
What do yall think?
Checklist 🧢
Affected issues 🎟