Add the authentication ui section

v3/docs/authentication/authentication-ui/changing-colours.mdx

@@ -0,0 +1,196 @@
+---
+title: Changing Colours
+sidebar_position: 2
+---
+
+import { UIType } from "/src/components/UITypeSwitch";
+import { FrontendTabs } from "/src/components/Tabs";
+
+
+<UIType.Switch />
+
+<UIType.PrebuiltUIContent>
+
+It is possible to update the default theme with your colours to make it fit perfectly with your website by defining a few css variables in the `style` property to the `EmailPassword.init` call.
+You have to specify the colors as RGB (see the following example), because we use the `rgb` and `rgba` functions to apply them.
+
+For example if your website uses a dark theme, here is how you can quickly customize it:
+
+<FrontendTabs>
+<FrontendTabs.Tab value="reactjs">
+
+```tsx
+import SuperTokens from "supertokens-auth-react";
+
+SuperTokens.init({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    // highlight-start
+    style: `
+        [data-supertokens~=container] {
+             --palette-background: 51, 51, 51;
+            --palette-inputBackground: 41, 41, 41;
+            --palette-inputBorder: 41, 41, 41;
+            --palette-textTitle: 255, 255, 255;
+            --palette-textLabel: 255, 255, 255;
+            --palette-textPrimary: 255, 255, 255;
+            --palette-error: 173, 46, 46;
+            --palette-textInput: 169, 169, 169;
+            --palette-textLink: 114,114,114;
+            --palette-textGray: 158, 158, 158;
+        }
+    `,
+    // highlight-end 
+    recipeList: [ /* ... */]
+});
+```
+</FrontendTabs.Tab>
+
+<FrontendTabs.Tab value="angular">
+
+```tsx
+// this goes in the auth route config of your frontend app (once the pre built UI script has been loaded)
+import {init as supertokensUIInit} from "supertokens-auth-react-script";
+
+supertokensUIInit({
+    appInfo: {
+        apiDomain: "...",
+        appName: "...",
+        websiteDomain: "..."
+    },
+    // highlight-start
+    style: `
+        [data-supertokens~=container] {
+            --palette-background: 51, 51, 51;
+            --palette-inputBackground: 41, 41, 41;
+            --palette-inputBorder: 41, 41, 41;
+            --palette-textTitle: 255, 255, 255;
+            --palette-textLabel: 255, 255, 255;
+            --palette-textPrimary: 255, 255, 255;
+            --palette-error: 173, 46, 46;
+            --palette-textInput: 169, 169, 169;
+            --palette-textLink: 114,114,114;
+            --palette-textGray: 158, 158, 158;
+        }
+    `,
+    // highlight-end 
+    recipeList: [ /* ... */]
+});
+```
+</FrontendTabs.Tab>
+</FrontendTabs>
+
+<img alt="Prebuilt form UI with custom color palette" width="600px" src="/img/emailpassword/signin-dark.png" />
+
+:::important
+Changes to the palette will apply to all the UI components we provide. If you want to change a specific component, please see [this section](changing-style).
+:::
+
+## Palette values
+
+### **background**: 
+- Description: This value represent the background color of all forms.
+- Default: ```255, 255, 255``` (white)
+
+### **inputBackground**: 
+- Description: This value represents the background color of the input fields of all forms.
+- Default: ```250, 250, 250``` (light grey)
+
+### **inputBorder**: 
+- Description: This value represents the border color of the input fields of all forms.
+- Default: ```224, 224, 224``` (light grey)
+
+<img alt="Prebuilt input field" width="400px" src="/img/emailpassword/input-background.png" />
+
+### **primary**: 
+- Description: This value represents the primary color used for highlighting focused inputs, display successful states and button background colour.
+- Default: ```28, 34, 42```
+
+<img alt="Prebuilt UI with an input field highlighted" width="400px" src="/img/emailpassword/primary.png" />
+
+### **primaryBorder**: 
+- Description: This value represents the border color used for primary buttons.
+- Default: ```45, 54, 68```
+
+### **success**: 
+- Description: This value represents the color used on success events.
+- Default: ```65, 167, 0``` (green)
+
+### **successBackground**: 
+- Description: This value represents the color used on as a background for success notifications.
+- Default: ```217, 255, 191``` (green)
+
+<img alt="Element visible when email is resent successfully" width="400px" src="/img/emailpassword/success.png" />
+
+### **error**: 
+- Description: This value represents the error color used for highlighting inputs with errors, and display error messages.
+- Default: ```255, 23, 23``` (red)
+
+### **errorBackground**: 
+- Description: This value represents the error color used as a background for error notifications.
+- Default: ```255, 241, 235``` (red)
+
+<img alt="Prebuilt form field with error" width="400px" src="/img/emailpassword/error.png" />
+
+### **textTitle**: 
+- Description: This value represents the color of the title of each forms.
+- Default: ```0, 0, 0``` (black)
+
+<img alt="Prebuilt form title" width="400px" src="/img/emailpassword/textTitle.png" />
+
+### **textLabel**: 
+- Description: This value represents the main color used for form fields labels.
+- Default: ```0, 0, 0``` (black)
+
+<img alt="Prebuilt form field labels" width="200px" src="/img/emailpassword/textLabel.png" />
+
+
+### **textInput**: 
+- Description: This value represents the main color used for form fields labels.
+- Default: ```0, 0, 0``` (black)
+
+<img alt="Prebuilt form field" width="200px" src="/img/emailpassword/textInput.png" />
+
+
+### **textPrimary**: 
+- Description: This value represents the main color used for subtitles and footer text.
+- Default: ```128, 128, 128``` (grey)
+
+<img alt="Prebuilt form terms and policy links" width="400px" src="/img/emailpassword/textPrimary.png" />
+
+
+### **textLink**: 
+- Description: This value represents the color used for links (see the image above).
+- Default: ```0, 122, 255``` (blue)
+
+
+### **buttonText**: 
+
+- Description: This value represents the colour of the text inside the main button on each page
+- Default: ```255, 255, 255``` (white)
+
+<img alt="Prebuilt form submit button" width="400px" src="/img/emailpassword/buttonText.png" />
+
+### **superTokensBrandingBackground**: 
+
+- Description: This value controls the color of the SuperTokens branding element on the bottom of sign-in/up pages
+- Default: ```242, 245, 246``` (alice blue)
+
+### **superTokensBrandingText**: 
+
+- Description: This value controls the color of the "Powered by SuperTokens" text on the bottom of sign-in/up pages
+- Default: ```173, 189, 196``` (heather grey)
+
+<img alt="Prebuilt form SuperTokens label" width="400px" src="/img/styling/branding_element.png" />
+
+</UIType.PrebuiltUIContent>
+<UIType.CustomUIContent>
+
+:::caution
+Not applicable if you do not use our pre built UI
+:::
+
+</UIType.CustomUIContent>