dark-mode

Dark Mode Support for Universal Login

Overview

This is a simple implementation of dark mode support for Auth0 Universal Login. It detects and uses the user's dark mode browser/OS preference (if present) and adds a toggle button so the user can switch between light and dark modes. If the user opts to use the toggle, the last mode used will be saved as a preference in the browser’s local storage.

Prerequisites

• You must have a custom domain configured on your tenant.
• This project requires the Auth0 CLI. Ensure that you have logged the CLI into your desired tenant.

auth0 login

Setup

1. Open the Universal Login Branding Customization Editor

   auth0 ul customize -r standard

2. Copy the contents of dark-mode-page-template.html into the page template.

   

3. Click Deploy Changes!

Or, update the page template non-interactively.

cat dark-mode-page-template.html | auth0 ul templates update

Screenshots

Dark Mode

Light Mode

Caveats

• There may be a flicker during screen transitions where the page is changed from light to dark.