Changing Colours ๐จ
This section applies to the Sign-up / Sign-in and reset-password forms.
It is possible to update the default theme with your colours to make it fit perfectly with your website by adding a palette
property to the ThirdPartyEmailPassword.init
call.
For example if your website uses a dark theme, here is how you can quickly customize it:
SuperTokens.init({
appInfo: {...},
recipeList: [
ThirdPartyEmailPassword.init({
palette: {
background: '#333',
error: '#ad2e2e',
textTitle: "white",
textLabel: "white",
textInput: '#a9a9a9',
textPrimary: "white",
textLink: '#a9a9a9'
}
}),
Session.init()
]
});
Changes to the palette will apply to the following forms:
- Sign up form
- Sign in form
- Reset password forms
You will see that the styles were applied to Sign-up too if you click on the "Sign up" link on the form above.
Palette values
background:
- Description: This value represent the background color of all forms.
- Default:
"white"
- Example:
background: ""
inputBackground:
- Description: This value represents the background color of the input fields of all forms.
- Default:
"#fafafa"
(light grey) - Example:
inputBackground: "#fafafa"
- primary:
- Description: This value represents the primary color used for highlighting focussed inputs, display successful states and button background colour.
- Default:
"#ff9b33"
(orange) - Example:
primary: "#ff9b33"
- success:
- Description: This value represents the error color used on success events.
- Default:
"#41a700"
(green) - Example:
success: "#41a700"
- error:
- Description: This value represents the error color used for highlighting inputs with errors, and display error messages.
- Default:
"#ff1717"
(red) - Example:
error: "#ff1717"
- textTitle:
- Description: This value represents the color of the title of each forms.
- Default:
"#222222"
(black) - Example:
textTitle: "#222222"
- textLabel:
- Description: This value represents the main color used for form fields labels.
- Default:
"#222222"
(black) - Example:
textLabel: "#222222"
- textInput:
- Description: This value represents the main color used for form fields labels.
- Default:
"#222222"
(black) - Example:
textInput: "#222222"
- textPrimary:
- Description: This value represents the main color used for subtitles and footer text.
- Default:
"#656565"
(grey) - Example:
textPrimary: "#656565"
- textLink:
- Description: This value represents the color used for links (see the image above).
- Default:
"#0076ff"
(blue) - Example:
textLink: "#0076ff"