Getting started with Pixie Dark

Last updated on
12 September 2026

Overview

Pixie Dark is a content-first dark theme for Drupal sites in the Pixie family. The theme supplies the visual system, regions, responsive behavior, and accessibility details while Drupal owns the page content, navigation, media, metadata, and blocks. The repository includes four visual variants: PixieCore, PixieFlow, Pixie Works, and Twinkle Networks.

Requirements

Use Drupal 10.3 or later, Drupal 11, or Drupal 12.

Installation

Install Pixie Dark 1.0.0-beta2 with Composer. This is a beta release; test it before production use:

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

For a source checkout, place the pixie_dark directory in web/themes/custom/ or themes/custom/ and run the Drush commands above.

Choose a visual variant

Go to Appearance > Settings > Pixie Dark and select pixiecore, pixieflow, pixie_works, or twinkle. A variant changes the visual treatment only; it does not create or replace site content.

Pixie Works, PixieFlow, PixieCore, and Twinkle Networks are live examples of the four visual variants.

Production screenshots

Configure Drupal regions

Place Drupal blocks in the regions that match your site structure:

  • Header: Site Branding
  • Primary menu: Main navigation
  • Secondary menu: optional utility links
  • Breadcrumb, Highlighted, Help, sidebars: only when your site needs them
  • Content: the front-page node or other rendered content
  • Footer: any footer blocks

Keep organization names, canonical URLs, language links, contact details, and marketing copy in Drupal configuration, content, media, or blocks rather than in the parent theme.

Pixie Example starterkit

The repository includes starterkits/pixie_example, an installable subtheme that demonstrates a branded landing page and authenticated routes without modifying Pixie Dark:

cp -R starterkits/pixie_example web/themes/custom/pixie_example
drush theme:enable pixie_dark pixie_example
drush config:set system.theme default pixie_example -y
drush cache:rebuild

Replace the supplied logo, favicon, hero image, screenshot, and demo copy before publishing. Put the Site Branding and navigation blocks in the matching regions.

Try Pixie Example with Docker

Run your own disposable Pixie Example demo using the prebuilt naoi/pixie_dark_example image from Docker Hub. It includes Drupal, SQLite, sample content, the Pixie Example site theme, and the Default Admin administration theme. Docker must be installed and running; no separate database container is needed. This image is for local evaluation, not production hosting.

Pull and start the demo

docker pull naoi/pixie_dark_example:latest
docker run --detach --rm --name pixie-example -p 127.0.0.1:8080:80 naoi/pixie_dark_example:latest

The current image targets linux/amd64. On an ARM computer such as an Apple Silicon Mac, enable amd64 emulation in your Docker environment and add --platform linux/amd64 to both commands, immediately after pull or run.

Open the demo and sign in

Allow the first installation to finish, then open http://localhost:8080/ for the front page or http://localhost:8080/user/login to sign in. These addresses refer to your own computer, not a shared hosted demo.

docker logs pixie-example

The default username is admin. Find the generated password under Pixie Example administrator credentials in the container logs. A fixed password is not embedded in the image. Keep these logs private because they contain the administrator password. If the page is not ready yet, check the same logs for installation progress and retry.

Stop or reset the demo

docker stop pixie-example

With the command above, stopping the container also removes it and its demo data. Run the start command again for a fresh installation and a newly generated password. This reset behavior assumes no persistent volumes are added. The port binding limits access to your own computer.

Update the demo image

The demo is distributed as naoi/pixie_dark_example:latest; no version-specific demo tag is required. Pulling a new image does not update a container that is already running. To start a fresh demo with the latest image, stop the disposable container, pull again, and recreate it:

docker stop pixie-example
docker pull naoi/pixie_dark_example:latest
docker run --detach --rm --name pixie-example -p 127.0.0.1:8080:80 naoi/pixie_dark_example:latest
docker logs pixie-example

This discards changes made inside the previous demo when using the no-volume --rm setup above. Retrieve the newly generated password from the new container logs. A simple restart of an existing container preserves its current data and password. If port 8080 is in use, choose another host port, for example 127.0.0.1:8081:80, and open that port in your browser.

Branding and authenticated pages

Configure the site name, logo, favicon, and navigation through Drupal. The starterkit includes a branded template for login, registration, and password-reset routes. Keep user account creation and access policies in Drupal permissions and site configuration.

Subtheming

Create a subtheme with pixie_dark as its base theme. Override only the templates and styles that your site needs. Keep reusable content in nodes, blocks, and media so theme updates do not overwrite editorial changes. The starterkit is a starting point, not a replacement for Drupal's content model.

Accessibility and responsive behavior

Pixie Dark provides a keyboard-focusable skip link, visible focus states, responsive layouts, and reduced-motion handling. Site builders must still provide meaningful heading order, alternative text, descriptive link text, adequate contrast, and accessible media descriptions.

Upgrading

Back up the database and configuration before updating. Review the release notes for changes to variant CSS, regions, and the front-page content contract, then run:

composer require 'drupal/pixie_dark:1.0.0-beta2'
drush cache:rebuild

Pixie Dark does not create or delete content during updates. Page copy and media remain ordinary Drupal content and block configuration.

When upgrading to 1.0.0-beta2, review the release notes. The release refines Pixie Example and Twinkle Networks hero spacing. No theme configuration migration is required. If you copied Pixie Example into a custom subtheme, compare and apply the starterkit changes separately without overwriting your customizations.

Support

For a reproducible problem, open an issue in the Pixie Dark issue queue with the Drupal and PHP versions, selected variant, route, expected result, actual result, and steps to reproduce. Source code and release notes are available in the Pixie Dark repository.

Help improve this page

Page status: No known problems

You can: