Contrib.social

Subtheme of subtheme is not reading styles in the expected order

Open on Drupal.org →
Created on 17 May 2023, about 1 year ago
Updated 3 July 2023, 12 months ago

Problem/Motivation

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.

Steps to reproduce

  1. Create a subtheme of bootstrap5 called bcbb_theme, verify in bcbb_theme.info.yml the line 'base theme': bootstrap5.
  2. add some css to test with, say body {background: yellow}
  3. set bcbb_theme as the default theme
  4. go to the home page
  5. See that the page background is yellow
  6. Create a subtheme of bcbb_theme called dc_theme, verify in dc_theme.info.yml the line 'base theme': bcbb_theme.
  7. set dc_theme as the default theme
  8. go to home page
  9. see that the background is not yellow
  10. open dev tools
  11. 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.

Expected behaviour

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.
Sign in to follow issues

Comments & Activities

  • Issue created by @crow
  • Comment about 1 year ago →
    🇨🇦Canada Liam Morland Ontario, CA 🇨🇦
  • Comment about 1 year ago →
    🇨🇦Canada crow
  • Comment about 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 12 months ago
  • Comment 12 months 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.

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024