Problem/Motivation

Bootstrap for Cloud offers six color themes: Blue, Red, Dark, Oceanic, Storm, and Typhoon. Sites that follow the Pixie visual system, defined by the Pixie Works variant of Pixie Dark, have no matching option, so Cloud administration pages do not match the public site.

Proposed resolution

  • Add css/pixie-dark-theme.css, a color theme that reuses the Pixie Works palette, typography, and interactive states, and exposes them as CSS custom properties.
  • Register the pixie-dark-theme library in bootstrap_cloud.libraries.yml.
  • Add the pixie_dark option, labeled Pixie Dark, to the theme setting in bootstrap_cloud.theme and attach the library from hook_preprocess_html().
  • Treat pixie_dark like the other dark palettes in hook_form_alter() and bootstrap_cloud_preprocess_field_multiple_value_form() so the Refresh, Copy, Stop, and Add Rule buttons keep their existing button classes.
  • Keep dark as the default value of theme_color, so existing sites are unaffected.

Remaining tasks

  • Review the palette on representative Cloud pages and record visual evidence.

User interface changes

The Theme select on AppearanceBootstrap for Cloud gains a Pixie Dark option.

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ai_yas created an issue. See original summary.

ai_yas’s picture

Status: Needs work » Needs review

MR!63 passed the merged-results pipeline.

I’ll merge the MR into 7.x; and close this issue as Fixed.

  • yas committed 7964249e on 7.x
    feat: #3620952 Add a "Pixie Dark" color based theme
    
ai_yas’s picture

Status: Needs review » Fixed

MR!63 was squash merged into 7.x.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.