Designing admin portal pages

Overview

As in the login box, we offer four theme options: vivid, modern, classic, and dark. This guide will show you how to customize your Admin Portal using our theme options.

📘

This customization is available through the themeOptions in the App file.

Requirements before getting started

🚧

If you haven't integrated the Admin portal into your application, please integrate it before. Read the Admin Portal integration guide.

Required versions:

@frontegg/react v5.0.12
@frontegg/angular v5.7.1
@frontegg/vue v2.0.11
@frontegg/nextjs v6.7.5

What to do to make this work?

If you are using our hosted login

1. Go to the builder - Experience
2. Click on the Admin portal tab
3. Open the style menu on the right
4. Choose a Theme
5. Publish your changes

🚧

Once you have chosen a theme, you can match the color palette accordingly. A Primary color will affect the left menu on the Admin Portal for Modern and Vivid themes. Try it.

If you are using our embedded login

How to customize theme in admin portal?

In order to customize the theme of the admin portal provide the themeName to the adminPortal in themeOptions.

You can choose one of the following options:

1. “modern”
2. “vivid”
3. “dark”
4. “classic”

if you are not providing a themeName, you will get the default look of our admin portal:

Use customization for your admin portal theme. This is what the code looks like:

import React from "react";
import {FronteggProvider, FronteggThemeOptions} from "@frontegg/react";
import contextOptions from './context-options';

const themeOptions: FronteggThemeOptions = {
     adminPortal: {
       themeName: "modern"
    },
};

const Provider = () => (
    <FronteggProvider contextOptions={contextOptions} themeOptions={themeOptions}>
        <div />
    </FronteggProvider>
);

export default Provider;

After providing the following modern theme via customization, this is what the admin portal looks like:

After providing the following dark theme via customization, this is what the admin portal looks like:

After providing the following vivid theme via customization, this is what the admin portal looks like:

After providing the following classic theme via customization, this is what the admin portal looks like:

📘

You can reverse the old design by clicking the rollback button