By james, 1 December, 2023
Door 1 revealing a gin glass representing the Gin Admin Theme

Welcome to the 2023 Drupal Advent Calendar. Behind today’s door, we find the Gin Admin Theme, with a fantastic write-up by Ludovic Favre (Grumpy74).

Since Drupal 10, Claro has been the default admin theme for Drupal websites. It added a new look and feel improving usability for Drupal site builders and administrators. But wouldn’t be amazing if you could add new features on top of it? Well, that’s exactly what Gin Admin Theme provides.

First of all, the Gin Admin theme maintainer, @saschaeggi, is a contributor on Claro theme and the Drupal Design System. This makes it hyper relevant in terms of compliance with Drupal good practices. It has its foundations in Claro, so keeps track of changes there, while adding many improvements. Some of these new features are planned for inclusion in Claro in the future.

Among the features provided by Gin Admin Theme, my favorite is probably the custom selection of accent color. The accent color will automatically be applied to all admin user interface elements such as selected menus items, buttons, and icons. This allows your administration pages to fit with your client’s corporate color scheme very easily. 

Gin theme with blue accentGin theme with green accent colorGin theme with red accent color

The theme replaces the built-in Drupal admin menus with its own configurable menu display. By default, the menu bar appears vertically on the left side of the screen, with nice new icons and modern design. If you prefer, you can select a horizontal design at the top of the screen, or if you don’t like either, you can revert to the classic Drupal menu style .

Vertical modern menu bar
Vertical modern menu bar
Horizontal modern menu bar
Horizontal modern menu bar
Legacy Drupal menu bar
Legacy Drupal menu bar

The theme offers also a dark mode option which could automatically fit your operating system setting.

Dark mode
Dark mode

As the cherry on the cake, you can also choose to allow each user to override Gin settings, to personalize their experience.

The other wonderful feature is located on the edit page for content. The theme displays the title and actions buttons (publish, preview, save, etc..) at the top of the screen. These become sticky when the page scrolls down. This way you always have access to the controls while editing your content, which is a big improvement to always having to scroll to the very bottom of the page to find the save button.

Node edit page
Node edit page
Node edit page header sticky
Node edit page header sticky

The second useful option on the node edit page is the collapsible panel on the right of the page where the extra content fields such as publication status, menu and URL settings can be edited. By closing this panel, you have the complete screen dedicated to your content’s fields, allowing users to focus on their editing without distraction.

Right panel closed
Right panel closed

Additionally, Gin Admin theme has its own module ecosystem extending its functionality like Gin toolbar to display the Gin admin toolbar on the main site theme, or Gin login providing a nice login page (configurable through admin UI) or helping interoperate with other core and contrib projects such as Admin toolbar, coffee, layout builder, Gutenberg. Check out the complete list.

To conclude, if you are looking for a new admin theme to spice up your Drupal experience, if you already like Claro as your Admin theme of choice, you must give a try to Gin Admin Theme.

Photo of Ludovic Favre

Ludovic Favre has been a Drupal backend developer since 2015 and is currently working for Happy Coding, an IT company based in Geneva. His job consists mostly in developing custom modules and themes for Drupal applications. When he’s away from the keyboard he likes to play guitar / bass and drums (as a former mixing engineer), practicing Brazilian Jiu jitsu, but on top of that he loves to spend time with family and friends enjoying time around good beers and wines. 

Comments1

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Martin Price (not verified)

2 months ago

Worth mentioning that the maintainer, @saschaeggi has also been involved in porting this to Backdrop CMS and is one of the maintainers on that version of this excellent theme. See day 9 for more details about Backdrop CMS.