DEV Community

Javier Eguiluz
Javier Eguiluz

Posted on

The New EasyAdmin Design: Make It Yours

#easyadmin #symfony #php #design

In the previous post we showed the new EasyAdmin design that's coming soon. It looks good on any backend, but it's a generic design and your backend should look like your brand, product or company.

With the new version, you can change most of the design with a few lines of PHP:

namespace App\Controller\Admin;

use EasyCorp\Bundle\EasyAdminBundle\Attribute\AdminDashboard;
use EasyCorp\Bundle\EasyAdminBundle\Config\Dashboard;
use EasyCorp\Bundle\EasyAdminBundle\Config\Option\Font;
use EasyCorp\Bundle\EasyAdminBundle\Config\Theme;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractDashboardController;

#[AdminDashboard(routePath: '/admin', routeName: 'admin')]
class DashboardController extends AbstractDashboardController
{
    public function configureDashboard(): Dashboard
    {
        return Dashboard::new()
            ->setTitle('Plant Shop')
            ->setTheme(Theme::new()
                ->primaryColor('emerald', dark: 'teal')
                ->grays('stone', dark: 'zinc')
                ->radius('lg')
                ->spacing('sm')
                ->font(base: Font::IbmPlexSans, monospace: Font::JetBrainsMono)
            );
    }
}
Enter fullscreen mode Exit fullscreen mode

That's all. No CSS, no build step and no templates to override. This is the result:

Plant Shop with the theme of the previous example: green color, warm grays, round corners and the IBM Plex Sans font

Colors

The theme API has been around since EasyAdmin 5.4. The new version adds the 18 predefined colors from TailwindCSS that work well in both light and dark mode:

// neutral (black), red, orange, amber, yellow, lime, green,
// emerald, teal, cyan, sky, blue, indigo, violet, purple,
// fuchsia, pink, rose
Theme::new()->primaryColor('indigo');
Enter fullscreen mode Exit fullscreen mode

You can also use your exact brand color, with an optional version for dark mode:

Theme::new()->primaryColor('#15803d', dark: '#22c55e');
Enter fullscreen mode Exit fullscreen mode

Predefined colors include their own text color. For custom colors, EasyAdmin picks black or white, whichever is easier to read:

The same interface elements with two predefined colors and two custom colors, each one with readable text on top

Fonts

This is the big new theming feature. Few things change the personality of an application as much as its font, and now it only takes one method:

// pick one of the fonts included by default:
// Inter, IbmPlexSans, Rubik and AtkinsonHyperlegibleNext
Theme::new()->font(base: Font::Rubik);

// you can also use the default font of the operating system
Theme::new()->font(base: Font::System, monospace: Font::System);

// or any font from Google Fonts
Theme::new()->font(base: 'Lexend', monospace: 'Fira Code');
Enter fullscreen mode Exit fullscreen mode

EasyAdmin now includes four ready-to-use fonts: Inter, IBM Plex Sans, Rubik and Atkinson Hyperlegible Next (designed for low-vision readers). All of them work well in professional backends, but they're different enough to give your backend its own personality.

The included fonts are served by your own application, so browsers don't make requests to other websites. Google Fonts are loaded from Bunny Fonts, a mirror that doesn't track your users.

This is the same page title and table row using four different fonts:

The same page title and table row using four different fonts

Corners, Spacing and Grays

Three more options change the feel of the entire backend:

Theme::new()
    // used in buttons, badges, form inputs, etc.
    // values: 'none' (looks technical), 'xs', 'sm', 'md', 'lg', 'xl' (looks friendly)
    ->radius('xl')

    // changes both the margin and padding of all elements on the interface
    // values: 'xs', 'sm', 'md', 'lg', 'xl'
    ->spacing('xs')

    // same as Tailwind gray colors: https://tailwindcss.com/docs/colors
    // values: neutral, stone, zinc, gray, slate, mauve, olive, mist, taupe
    ->grays('stone');
Enter fullscreen mode Exit fullscreen mode

This is the same backend with square corners and with very round corners:

The same interface with square corners and with very round corners

This is the same table with compact spacing and with generous spacing:

The same table with compact spacing and with generous spacing

Don't underestimate the grays. Most of the screen is gray (backgrounds, borders and secondary text), so this option changes the feel of your backend more than you'd expect.

Icons

Icons aren't part of the theme config, but if you want a different look, changing them helps a lot. EasyAdmin uses FontAwesome by default, a great icon set that works without any setup. Most screenshots of these posts use Lucide instead. This is the same menu with three popular icon sets:

The same menu with FontAwesome, Lucide and Material Symbols icons

To use a different icon set, first install Symfony UX Icons. The HTTP client lets it download the icons:

composer require symfony/ux-icons symfony/http-client
Enter fullscreen mode Exit fullscreen mode

Then, add the prefix of the icon set to your dashboard. You can find all the icon sets and their prefixes on ux.symfony.com/icons:

public function configureAssets(): Assets
{
    return Assets::new()->useCustomIconSet('lucide');
}
Enter fullscreen mode Exit fullscreen mode

Each icon set uses its own names, so you also need to update the icons of your menus, actions, fields, etc.:

// before (FontAwesome)
MenuItem::linkTo(UserCrudController::class, 'Users', 'fa fa-users');

// after (e.g. Lucide)
MenuItem::linkTo(UserCrudController::class, 'Users', 'users');
Enter fullscreen mode Exit fullscreen mode

Finally, make sure that the icons are available in production. With this config, Symfony UX Icons saves each icon in assets/icons/ the first time it's displayed in your development environment, and you only have to commit those files:

# config/packages/ux_icons.yaml
when@dev:
    ux_icons:
        iconify:
            auto_lock: true
Enter fullscreen mode Exit fullscreen mode

One Backend, Many Personalities

Let's put it all together to show some real examples of how you can give your backend a distinct personality with these design options.

(1) Backend with a look inspired by Google: Google Sans font, blue color, neutral grays and Material Symbols icons.

Plant Shop with a look inspired by Google: Google Sans font, blue color, neutral grays and Material Symbols icons

Theme::new()
    ->primaryColor('#0b57d0', dark: '#a8c7fa')
    ->grays('neutral')
    ->radius('xl')
    ->font(base: 'Google Sans');
Enter fullscreen mode Exit fullscreen mode

(2) Backend with a look inspired by IBM Carbon: IBM Plex Sans font, blue color, square corners and Carbon icons.

Plant Shop with a look inspired by IBM Carbon: IBM Plex Sans font, blue color, square corners and Carbon icons

Theme::new()
    ->primaryColor('#0f62fe')
    ->grays('gray')
    ->radius('none')
    ->spacing('sm')
    ->font(base: Font::IbmPlexSans);
Enter fullscreen mode Exit fullscreen mode

(3) Backend with an elegant personality: a violet color, tinted grays and Phosphor Duotone icons (shown in dark mode).

Plant Shop in dark mode with a violet color, tinted grays and Phosphor Duotone icons

Theme::new()
    ->primaryColor('violet')
    ->grays('mauve')
    ->radius('lg');
Enter fullscreen mode Exit fullscreen mode

(4) Backend with an accessibility focus: orange color, generous spacing, a font designed for low-vision readers and FontAwesome icons.

Plant Shop with an orange color, a font designed for low-vision readers and FontAwesome icons

Theme::new()
    ->primaryColor('orange')
    ->spacing('lg')
    ->font(base: Font::AtkinsonHyperlegibleNext);
Enter fullscreen mode Exit fullscreen mode

If you build backends for clients, each one can get a backend that looks like their own product with a few lines of PHP.

The UI Kit

You don't have to guess how a color or a font will look. EasyAdmin includes a UI Kit, a set of pages inside your own dashboard, available at /admin/_ea_ui_kit in your development environment. In the new version, you can try the predefined colors and fonts there and copy the PHP code of your selection.

The UI Kit showing a color picker and the PHP code of the selected theme

It also shows all the HTML elements and Twig components with their code, using your theme and your CSS. It only exists in debug mode, so it never reaches production.

When You Need More

The theme covers most cases, but you can go further. Each level gives you more control:

  1. The theme: a few options in PHP change the entire backend
  2. CSS variables: change a specific value, such as the color of the sidebar
  3. Your own CSS: change the style of anything
  4. Twig templates: change the HTML

Read the design chapter of the EasyAdmin docs to learn more about each level.

Your own custom backend pages can look just as good. Extend this template and your contents get the new typography without any CSS:

{% extends '@EasyAdmin/page/content.html.twig' %}
Enter fullscreen mode Exit fullscreen mode

Then use the same components as the rest of the backend, which follow your theme:

<twig:ea:Button color="primary" icon="fa fa-check">Save changes</twig:ea:Button>
<twig:ea:Badge color="success">Active</twig:ea:Badge>
Enter fullscreen mode Exit fullscreen mode

EasyAdmin Pro

Everything in this post is part of the free and open source EasyAdmin, and it will stay that way. If your company also needs more advanced features, take a look at EasyAdmin Pro, a paid extension that you install next to EasyAdmin:

  • 🕵️ Audit Log: see who changed your data, when, and what the previous values were
  • 🔒 Content Lock: show who's editing a record and keep others from overwriting their work
  • 📬 Messenger Inspector: track background jobs and investigate failures from your backend
  • 📝 Markdown Editor Field: write Markdown with a formatting toolbar and live preview
  • More new features are in development

Coming Soon

The new design is coming in the next EasyAdmin release. To get notified, watch the EasyAdmin repository on GitHub or follow me here on dev.to.

When it's out, update EasyAdmin, open /admin/_ea_ui_kit and find the look of your backend in five minutes. We'd love to see what you build with it! 🎨

✨ If you like this redesign and want to see more work like it, consider sponsoring the EasyAdmin project 🙌💡

Top comments (0)