Using an Azure AD UX Web Theme in Active Directory Federation Services

The AD FS forms sign in currently does not mirror the Azure/O365 sign-in experience. To provide a more uniform and seamless experience for end-users, we have released the follow cascading style sheet web theme which can be applied to your AD FS servers. Currently, the forms sign-in for AD FS on Windows Server 2016 looks like following:

Current sign-in

With the new style sheet, the user experience will look more like the Azure and Office 365 sign-in experiences.

Download the CSS style sheet

You can download the web theme from the following Github location.

Enabling the new web theme

To enable the new web theme use the following procedure:

To enable the new Azure AD UX web theme in AD FS

  1. Start PowerShell as an Administrator
  2. Create a new web theme using PowerShell: New-AdfsWebTheme –Name custom –StyleSheet @{path=”c:\NewTheme.css”}
  3. Set the new theme as the active theme using PowerShell: Set-AdfsWebConfig -ActiveThemeName custom PowerShell
  4. Test the sign-in by going to https://<AD FS name.domain>/adfs/ls/idpinitiatedsignon.htm Sign-on

![NOTE] You need to ensure that idpinitiatedsignon has been enabled. It is not enabled by default. To enable idpinitiatedsignon use the following PowerShell command: Set-AdfsProperties –EnableIdpInitiatedSignonPage $True

Image Recommendations

The following are the size recommendations for the background image and the logo image:

  • size 24px height, 256px max width
  • Do not add any padding around the logo within the asset. Ensure that the asset background is transparent.

Background

  • size 1024 x 1080 pixels with a file size of no greater than 200KB. You should use the highest resolution possible with aspect ratio 16:9/16:10 that keeps the image size under the restriction.

Next Steps