On this page
- Overview
- Requirements
- Installation
- Choose a visual variant
- Production screenshots
- Configure Drupal regions
- Pixie Example starterkit
- Try Pixie Example with Docker
- Pull and start the demo
- Open the demo and sign in
- Stop or reset the demo
- Update the demo image
- Branding and authenticated pages
- Subtheming
- Accessibility and responsive behavior
- Upgrading
- Support
Getting started with Pixie Dark
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
- Pixie Works (screenshot)
- PixieFlow (screenshot)
- PixieCore (screenshot)
- Twinkle Networks (screenshot)
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:latestThe 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-exampleThe 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-exampleWith 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-exampleThis 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
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion