Subtheme of subtheme is not reading styles in the expected order

Created on 17 May 2023, over 1 year ago

Updated 3 July 2023, over 1 year ago

A subtheme of a subtheme is reading styles in an unexpected order

in this case,
-- bootstrap5
---- bcbb_theme
------dc_theme

The expectation is that dc_theme will have priority over bcbb_theme, and bcbb_theme will have priority over bootstrap5

if enable and set dc_theme as default, it's reading styles from bootstrap5 before bcbb_theme, so thebcbb_theme styles are being overwritten.

if I enable bcbb_theme and set as default, it works as expected. Styles from bcbb_theme are applied and override whatever is in bootstrap.

Create a subtheme of bootstrap5 called bcbb_theme, verify in bcbb_theme.info.yml the line 'base theme': bootstrap5.
add some css to test with, say body {background: yellow}
set bcbb_theme as the default theme
go to the home page
See that the page background is yellow
Create a subtheme of bcbb_theme called dc_theme, verify in dc_theme.info.yml the line 'base theme': bcbb_theme.
set dc_theme as the default theme
go to home page
see that the background is not yellow
open dev tools
see that body styles in /themes/contrib/bootstrap5/css/style.css is being used over body styles in /themes/contrib/bcbb_theme/css/style.css

bootstrap5 and bcbb_theme are both in themes/contrib, dc_theme is in themes/custom.

Having default theme as bcbb_theme or dc_theme will show a yellow background in the example above.

🐛 Bug report

Status

Needs review

Version

3.0

Component

Miscellaneous

Created by

🇨🇦Canada crow

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @crow
Comment over 1 year ago →
🇨🇦Canada Liam Morland Ontario, CA 🇨🇦
Comment over 1 year ago →
🇨🇦Canada crow
Comment over 1 year ago →
🇺🇦Ukraine abyss
@crow This issue is probably a mistake because your second sub-themes have body styles that have the "background-color: var(--bs-body-bg);" parameter. This parameter overrides the background color that was set in the first subtheme.
Status changed to Needs review over 1 year ago12:54pm 3 July 2023
Comment over 1 year ago →
🇮🇳India ravi kant Jaipur
@crow
I followed the same method as described but I am getting yellow color in my sub-sub-theme.
Theme bootstrap5 style.css is not in use in my case. Only subtheme and sub-subtheme styles displaying.
Also, yellow background color is displayed in the sub-subtheme which I was set subtheme.
Attaching screenshot.

Production build 0.71.5 2024