Fix carousel when color-mode-type is media-query

[malberts]

Description

Bug: #38322
This adds a trivial condition to apply #38209 only when @color-mode-type=dark.

Motivation & Context

It fixes #38322.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-{your_pr_number}--twbs-bootstrap.netlify.app/

Related issues

[malberts]

What would be the best way to add an automated test case for this? I had a quick look but couldn't immediately figure it out. I don't think the Jasmine tests can do this, because it's not actually compiling the whole SCSS. Basically we want to compile the SCSS with a different set of variables. If there's a good example and I missed it, let me know and I'll follow up.

[julien-deramond]

Yep I agree for the automated test, I've suggested something in #38326. We'll try to look at your fix asap. Thanks for the PR @malberts.

[malberts]

Thanks @julien-deramond, I understand how this can be done now.

npm run css-test passes locally with that test and my change:

[mdo]

I didn't see this PR before creating mine, but wanted to share that I prefer the combined selector output from #38328 over this option. I'll go ahead and close this out and we'll plan to ship that one.