Gin Admin Theme

A radically new UI layout paired with goodies like a Darkmode will give your Drupal's Admin interface a facelift. The Gin theme also includes things which are currently out of scope for Claro and/or some customisations we're experimenting with for the future. Built on the foundation of Claro from one of the lead designers of Claro & Drupal Design System.

Version

The 8.x-3.x requires Drupal 8.9+. This branch is actively maintained.
This uses the new "Future UI".

Older Versions
8.x-3.x-alpha37 is the last release to support Drupal 8.8.
8.x-2.x requires Drupal 8.8+
8.x-1.x requires Claro installed as a contrib module. (Drupal < 8.8)

---

Installation

1. composer require 'drupal/gin:^3.0'
2. Enable the Theme in the backend /admin/appearance
3. Set it as default Administration theme

⚠️ Unable to install / Unable to update

This might be related to your minimum-stability setting in composer.
Solution: composer require drupal/gin_toolbar:^1.0@beta drupal/gin:^3.0@beta

---

Demo

A demo can be found over at simplytest.me.

---

Settings

Gin's Settings can be found at /admin/appearance/settings/gin

• ? Darkmode
• Accent colors (? Blue, ? Orange, ? Green, ? Red, ? Purple etc.)
• Use your own custom Accent color
• Ability to change the focus color
• Choose from 3 different Toolbars (Sidebar, Minimal, Legacy)
• User overrides
• Support for custom CSS overrides (see "Notes" section)
• Custom Logo support (e.g. Brand/Client)
• High contrast mode (Experimental)

---

Related Modules

For a better experience you can also use the following related modules:

	Gin Toolbar Is needed to enable the toolbar also for the Frontend (when logged into Drupal Admin) and for a consistent UX using the legacy toolbar (for which gin includes styling improvements)
	Gin Login For a simple but elegant Drupal Login screen (with Darkmode support)
	Gin Dashboard Concept work ongoing for a Dashboard
	Gin Layout Builder This module brings the gin admin theme to the layout builder.
	Gin Gutenberg An integration between Gin theme and Gutenberg Editor to fix/improve the UI

---

Recommendations

This theme works best together with:

• Gin Toolbar
• Admin Toolbar
• Coffee

---

Known Issues

---

Notes

Custom CSS

Add a file called gin-custom.css to your public files folder for simple CSS adjustments.

Frontend Toolbar offsets

Use the following CSS3 variables to automatically set the offsets (works with all toolbar variants):

.fixed-header {
    position: fixed;
    top: var(--ginHorizontalToolbarOffset, 0);
    left: var(--ginVerticalToolbarOffset, 0);
    width: calc(100% - var(--ginVerticalToolbarOffset, 0px));
}

---

Sponsoring Organisations

Full list of Sponsors