Problem/Motivation

Drupal 12's new administration theme, confusingly titled "Admin", will likely be the default theme in Drupal 12. It supports dark mode, and by default it matches the user's preference.

Paragraphs hard codes some color values into the CSS, which obviously won't adapt to dark mode.

I created a documentation page that guides maintainers how to fix this at https://www.drupal.org/docs/core-modules-and-themes/core-themes/default-...

Example of the problem:

CommentFileSizeAuthor
#8 claro.png169.65 KBishfaqafridi85
#8 admin-light.png201.87 KBishfaqafridi85
#8 admin-dark.png201.22 KBishfaqafridi85
#8 admin-dark-actions.png206.46 KBishfaqafridi85
paragraphs-dark-mode.png26.55 KBmherchel

Issue fork paragraphs-3619718

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:

About issue forks

Comments

mherchel created an issue. See original summary.

mherchel opened merge request !281

mherchel changed the visibility of the branch 3619718-support-dark-mode to hidden.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Worked with Claude to generate the initial MR. Just pushed, but haven't yet tested. Will test right now and see how good Claude + my docs really are.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review
Issue tags: +Needs manual testing

This is looking good. But needs extensive manual testing (Paragraphs does so much).

We need to test Claro (should be no changes), and both light and dark modes of the Admin theme.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

PS. You can test this in 11.4.4 (but not before then)

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Issue summary: View changes
ishfaqafridi85’s picture

ishfaqafridi85 commented
StatusFileSize
new admin-dark-actions.png206.46 KB
new admin-dark.png201.22 KB
new admin-light.png201.87 KB
new claro.png169.65 KB

I manually tested MR !281 on Drupal 11.4.8 with Paragraphs 1.23.0 using Chrome on macOS.

The test page contained multiple Paragraph types, including expanded sections and nested cards. I tested the Paragraphs editing interface with the following administration themes and modes:

  • Admin theme in light mode
  • Admin theme in dark mode
  • Claro

I also tested expanding and collapsing Paragraph items and opening the Paragraphs action dropdown. The backgrounds, borders, labels, icons, focus styles and dropdown remained readable in both Admin colour modes. Claro retained its expected fallback appearance.

I did not observe an obvious visual regression in the tested interface. The MR works as expected in this environment.

Screenshots attached

vasyl vasylkiv’s picture

vasyl vasylkiv commented
Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs manual testing

Set the proper status.