Advaita

One theme for your whole Drupal site: the pages your visitors see and the admin pages your editors work in. Change how it looks in a few clicks, without writing code.

Early alpha. Try it on a test site and tell us what you think. The looks may change between releases, so don't use it on a live site yet.

The problems it solves

• Your site and your admin look like two different products. Editors jump between a front-end theme and an admin theme that share nothing. Advaita is one theme for both, built on one set of colours, type and spacing, and you can still give each side its own look.
• Editing tools look broken on your site's pages. When a form appears on a front-end page (Paragraphs, content moderation, Masquerade, Layout Paragraphs), it picks up the site theme's styles and falls apart. Advaita keeps those tools looking like the admin, even in the middle of your site.
• A new look usually means a new theme, or a developer. With Advaita you pick a look from a list. Or you start your own from your brand colour, in the admin, and fine-tune it there.
• Dark mode and accessibility are often an afterthought. Every Advaita look comes with light and dark versions and a high-contrast version, and it works with Windows' contrast themes. Every included look passes readable-contrast checks in light, dark and high contrast.

What you get

• Six ready-made looks, each with light and dark versions:
  • For your site: Atelier (editorial, warm paper and ink, terracotta buttons) and Paper (warm paper, serif headings, deep green buttons).
  • For your admin: Slate (a dense tool look in the style of the Drupal Canvas editor, not affiliated), Canvas (flat with fine lines, violet), Indigo (cool and calm) and Ember (warm stone and burnt orange).
• Make your own look under Appearance » Design system: start from an existing look and your brand colour, adjust it, and the admin tells you whether the text is still easy to read.
• A light/dark switch and a contrast switch in the header for every visitor. By default it follows their device settings.
• Drupal's admin tools fully restyled: buttons, forms, tabs, dialogs, drag-and-drop tables, vertical tabs, autocomplete, the text editor and the Navigation sidebar.
• Right-to-left languages supported, with an Arabic typeface included.
• Fonts and icons included and served from your own site, with no calls to Google Fonts or other outside services.
• Ready-made building blocks for pages and dashboards: badge, message, panel, statistic, empty state, timeline.

Getting started

Advaita is built on the Design System API module, which supplies its colours, type and the look switching. Composer installs it for you:

composer require drupal/advaita:^1.0@alpha drupal/design_system_api:^1.0@alpha

1. Under Appearance, install Advaita and set it as the default theme, the administration theme, or both.
2. Turn on the Design System API UI module and pick a look for your site and one for your admin, under Appearance » Design system » Binding. Until you do, Advaita shows a plain default look.
3. Optional: turn on Design System API: Admin chrome so the admin sidebar and toolbar keep the admin look on your site's pages.

Good to know

• Requirements: Drupal 11.5 or 12, and the Design System API.
• Drupal CMS: use Advaita as the admin theme for now. Drupal CMS's ready-made pages are built for its own front-end theme, Mercury, and don't display properly in Advaita yet. Drupal CMS sites get Drupal 11.5 once it is released as stable.
• Advaita is Sanskrit for "not two": one theme, not two. It is not GNOME's Adwaita theme, though the name is the same word.

Found a bug, or have an idea for a new look? Tell us in the issue queue.