Accordion section content container has a hard coded white background

[jonsamwell]

This is problematic in dark mode as the accordion section content background is always white.

https://github.com/GotJimmy/accordion/blob/master/lib/accordion_section.dart#L271

Could this be made configurable?

[GotJimmy]

Have you tried setting contentBackgroundColor to your color?

[anilflutter]

can make content background color is transparent? and can show content separate to header.

[GotJimmy]

Transparent is not going to work I think. How about using the same color for the content background as the background outside the Accordion?

[jonsamwell]

@GotJimmy I've set the content background colour to transparent with no effect. I think it is that hard-coded white value.

[jonsamwell]

None of the colours seems to work when in dark mode as the content and header backgrounds take on the white colour

Dark Mode:

Light Mode:

Code:

Accordion(
            disableScrolling: true,
            paddingListTop: 0,
            paddingListHorizontal: 0,
            contentBackgroundColor: Colors.transparent,
            contentBorderColor: Colors.transparent,
            headerBackgroundColor: Colors.red,
            headerBackgroundColorOpened: Colors.transparent,
            contentBorderRadius: 0,
            contentBorderWidth: 0,
            contentHorizontalPadding: 0,
            contentVerticalPadding: 0,
            headerBorderRadius: 0,
            headerPadding: const EdgeInsets.only(top: 16),
            scaleWhenAnimating: false,
            rightIcon: const Opacity(
              opacity: .6,
              child: PlatformAdaptiveIcon(
                cupertinoIcon: CupertinoIcons.chevron_up_chevron_down,
                materialIcon: CupertinoIcons.chevron_up_chevron_down,
                iconSize: 20,
              ),
            ),
            children: [
              for (var subSpecialtySegment in goalSet.goals)
                AccordionSection(
                  isOpen: true,
                  header: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(right: 8),
                        child: Text(
                          subSpecialtySegment.subSpecialtyName,
                          style: TextStyle(
                            fontSize: 16,
                            color: context.isIos
                                ? CupertinoColors.label.resolveFrom(context)
                                : Theme.of(context).textTheme.labelLarge!.color,
                          ),
                        ),
                      ),
                      Text(
                        '(${subSpecialtySegment.completedCount.toString()}/${subSpecialtySegment.goals.length})',
                        style: TextStyle(
                          fontSize: 16,
                          color: (context.isIos
                                  ? CupertinoColors.label.resolveFrom(context)
                                  : Theme.of(context)
                                      .textTheme
                                      .labelLarge!
                                      .color!)
                              .withOpacity(0.6),
                        ),
                      ),
                    ],
                  ),
                  content: GoalSubSpecialty(
                    subSpecialtySegment: subSpecialtySegment,
                  ),
                  contentHorizontalPadding: 0,
                  contentBackgroundColor: Colors.transparent,
                  headerBackgroundColor: Colors.transparent,
                  contentBorderColor: Colors.transparent,
                  headerBackgroundColorOpened: Colors.transparent,
                )
            ],
          ),

[GotJimmy]

Oh that background! I thought you were referring to the background of a section. I'll take another look at your issue and fix it this week.

[GotJimmy]

Ok, I took a closer look at your problem using your code (your Accordion with AccordionSections from my example). No white background ... you cannot even set the background in the Accordion. The contentBackgroundColor you were referring to is actually for the background color of each AccordionSection and that you can change as you can see in the screenshot. The dark grey background around the list of sections comes in this case from a standard Scaffold.backgroundColor and I tried a few different colors:

[GotJimmy]

Please try and confirm so that I can close this issue.