Skip to content

Getting started with Pixie Dark

Pixie Dark is a reusable Drupal theme with Pixie Works, PixieFlow, PixieCore, and Twinkle Networks presentation variants. It supplies the visual system while Drupal continues to own content, media, navigation, language settings, and metadata.

Requirements

Use a supported Drupal installation:

  • Drupal 10.6 or later
  • Drupal 11.4 or later

Consult the project page and release notes for the exact compatibility of the version you install.

Install and enable the theme

Install the project with Composer:

composer require drupal/pixie_dark
drush theme:enable pixie_dark
drush config:set system.theme default pixie_dark -y
drush cache:rebuild

For development from a source checkout, place pixie_dark in your project's contributed or custom theme directory, then use the same Drush commands.

Before making Pixie Dark the default theme on an existing site, enable it, select the variant, and compare a preview at the production viewport sizes.

Choose a visual variant

At Appearance → Settings → Pixie Dark, choose the appropriate variant. This affects presentation only. It does not create content or replace the site's menus and blocks.

The equivalent configuration is:

landing_variant: pixieflow # pixiecore, pixieflow, pixie_works, or twinkle

Production screenshots

See Production screenshots for the four live Pixie Dark variants and their current screenshots.

Build the page in Drupal

Put landing-page sections in a published front-page node or in blocks placed in theme regions. Store images in Drupal-managed files or media. Configure site identity and navigation with blocks:

  • Header: Site Branding
  • Primary menu: Main navigation
  • Secondary menu: Utility or account navigation
  • Content: The front-page node or page sections
  • Footer: Any site footer blocks

The theme renders the front-page Content region without an article wrapper, so the node body can provide the semantic section structure. Keep canonical URLs, language alternates, and social metadata in Drupal configuration and contributed modules rather than theme templates.

For Pixie Works and PixieFlow hero headings, wrap the words to emphasize in <span class="hero-accent">…</span> inside .hero-copy h1. The shared --landing-heading-accent token uses the existing PixieCore heading blue. PixieCore's heading em uses the same token. This styling works with English and Japanese text at all supported widths; it does not change heading sizes, line breaks, or the underlying Drupal content. Select the emphasized words in the node or block body rather than hardcoding site copy in theme templates.

Try the Pixie Example starterkit

The included Pixie Example starterkit is a copyable subtheme with replaceable starter assets, a site recipe, and a complete editable sample landing page. It is the fastest way to understand the expected page structure without changing the parent theme.

Copy the directory into your custom-theme location, enable it beside Pixie Dark, then apply its recipe to create the sample front page:

drush recipe web/themes/custom/pixie_example/recipe
drush locale:import ja web/themes/custom/pixie_example/translations/pixie_example.ja.po --type=customized --override=all
drush cache:rebuild

The recipe creates an ordinary editable node with English and Japanese translations and sets it as the front page on a fresh installation. The interface translation import provides Japanese hero, navigation, and account copy. English uses / and Japanese uses /ja. On an existing site, back up the database and inspect the current front-page setting before applying it; do not reapply the recipe over an existing sample node. Replace the starter artwork, copy, and links before publishing a site.

Authentication pages

Pixie Dark provides a shared responsive layout for login, password-reset, and account-registration routes. The page uses the configured Site Branding, menu, content, and footer blocks. Drupal account settings determine whether an account-registration link is available.

Update safely

Back up the database and configuration before upgrading. Then update the package, run database updates, rebuild caches, and review release notes for CSS, region, or landing-page contract changes.

composer update drupal/pixie_dark --with-dependencies
drush updatedb -y
drush cache:rebuild

Pixie Dark does not create or delete site content during an update. The selected variant remains in pixie_dark.settings; copy and media remain ordinary Drupal content and configuration.

Next steps