English version was created automatically using Drupal module auto_node_translate and free DeepL translator.

Gin as an administrative theme - setup and tuning

published on 2025-08-21

The Gin administrative appearance theme will soon be the default and will replace the existing Claro theme. We'll show you a few tricks on how to properly customize it in your image.

How it all started - Seven => Claro

Since Drupal 7 I was used to using the Seven admin theme. It was part of the Drupal 7 installation and featured in subsequent versions of Drupal 8 and 9. Like Drupal 7 itself, this theme dates from around 2010, so it has gradually aged. So it was gradually replaced by another theme - Claro. This started out as a standalone theme, then made its way to the core, and eventually became the default theme. The Seven theme took the opposite direction - it stopped being the default theme and eventually part of the default installation, and was maintained as a contrib theme. This allowed me to skip Claro and continue using Seven. It still exists as a contrib version, and even supports Drupal 11 in version 2.0.x-dev. Still, it's probably time to move on to something newer, more modern.

 

How it went - Claro => Gin

Around the end of 2019, a new contrib theme called Gin started to emerge as a gradual evolution of Claro. It gradually grew in popularity until it was deployed as the default theme in Drupal CMS 1.0 (January 2025) . Subsequently, during June 2025, it was announced that it would replace Claro for Drupal core as well (Drupal core will adopt Gin admin theme to replace Claro https://www.drupal.org/about/core/blog/drupal-core-will-adopt-gin-admin…)

 

That was something to start with, now we'll look at the actual installation, usage and some tricks.

 

Installing the Gin theme

In the current version of Drupal 11.2, gin has to be installed, which is no problem, just find the right version (https://www.drupal.org/project/gin).

gin releases

composer require 'drupal/gin:^5.0'

When you download it, the Gin Toolbar helper module to bring the Gin Toolbar into the Frontend of your site https://www.drupal.org/project/gin_toolbar will be downloaded.

Enable the theme and set it as default for administration and editing. And we can also go through the settings and customize it to our /admin/appearance/settings/gin

gin settings
 

Git Toolbar (gin_toolbar) + Admin Toolbar (admin_toolbar)

Because I like the top menu - toolbar, and still use the Admin Toolbar (https://www.drupal.org/project/admin_toolbar), I set Navigation (Drupal Toolbar) to Legacy, Classic Drupal Toolbar.

I also enabled the Gin Toolbar (gin_toolbar module). This makes the toolbar show up on the front-end of the theme as well.

Next, I noticed that the menu items (Configuration and Help) are not in the same order as they are ordered in the Administration menu. After some digging, I found out that Gin changes it that way on purpose. Anyway, this can be changed with a patch. And beware, the patch is needed for both Gin theme (back-end editing) and Gin Toolbar (front-end). Both can be found here:

By the way, the patch adds the configuration of this behavior - Order Admin menu items:

menu items order

 

Compact Gin (compact_gin)

Another thing I've struggled with is the amount of space around all the elements on the page - compared to the Seven theme, you can only see about half the information, you have to keep scrolling somewhere. It is possible to set Layout density to Narrow, but that only helps partially.

layout density

This is a problem that the Compact Gin module (https://www.drupal.org/project/compact_gin) tries to solve, which is really just one css file. But! It looks promising, but I found that it overwrites too much. I tried commenting out a few things, until I came to the conclusion that a better way to go is to add a few custom css definitions instead.

 

web/sites/default/files/gin-custom.css

As the documentation describes well, we can use the gin-custom file.css file to customize the Gin theme (Custom theming https://www.drupal.org/docs/contributed-themes/gin-admin-theme/custom-t…).

For example, Gin sets the maximum width of form elements, which is usually a waste of space. It does have a rationale (a11y), however, which 99% of users find rather annoying (Remove max-width from field description https://www.drupal.org/project/gin/issues/339159).

The solution is one line:

/* reset gin width limits */
.form-item__description, .fieldset__description, .filter-guidelines__item {
 max-width: unset;
}

Why you can't see the Save & Edit (save_edit)

You may be using this handy Save & Edit module and wondering why the button is not visible in the Gin theme (better said, it's hidden behind other actions - under the three dots). For the Gin theme, you need to enable "Display as Gin Admin theme primary actions"  in /admin/config/save_edit/settings.

save and edit in gin

Newer versions of Save & Edit should already detect the Gin theme and automatically set this on install (Save_edit in GIN admin theme in Drupal CMS (11) hard accessible https://www.drupal.org/project/save_edit/issues/3528935).

 

Conclusion

The Gin theme is the bright future of Drupal, so it's time to start using it. After installation, we need to set a few things to make it work the way we want it to.
We can extend its capabilities with additional contrib modules like the Gin toolbar. You can find a list of them here https://www.drupal.org/docs/contributed-themes/gin-admin-theme/related-…