Theme styling not showing

In Slack @janes_p mentioned that this happened with the Bootswatch Pulse theme.

I propose that this is a documentation issue. From looking at the Bootswatch preview pages, it appears that the previews can't necessarily be replicated by simply dropping the SCSS into the Radix sub-theme as the Radix documentation implies.

For example, the navbars in the Pulse preview are using Bootstrap bg utility classes to get the background colors, and the dark versions have data-bs-theme="dark" to get the light-colored icon on the toggle button.

Following the Radix documentation, I did see some of the Pulse theme's styles by dropping _variables.scss and _bootswatch.scss into a new sub-theme (core 11.x, Radix 6.0.2):

• Lighter gray text color
• Navbar padding
• Square corners on the navbar toggler button
• Purple links

However, as the IS describes, I did not see navbar background colors.

Here's a screenshot of the plain sub-theme, and then with the SCSS from Bootswatch Pulse:

Here are a couple of examples from tweaking the CSS class and data-bs-theme attribute in the browser DevTools (classes of bg-light and bg-primary, respectively):

I propose clarifying in the Radix Bootswatch documentation that some template customization may still be required to replicate the Bootswatch previews.

Looking at the Bootstrap docs more closely:

New in v5.2.0 — Navbar theming is now powered by CSS variables and .navbar-light has been deprecated. CSS variables are applied to .navbar, defaulting to the “light” appearance, and can be overridden with .navbar-dark.

New dark navbars in v5.3.0 — We’ve deprecated .navbar-dark in favor of the new data-bs-theme="dark". Add data-bs-theme="dark" to the .navbar to enable a component-specific color mode. Learn more about our color modes.

So, .navbar alone is expected to display the "light" version, and it has no background color by default.

However, the Bootswatch previews that I've see specifically use .bg-light to get their light versions. I'd call that an oversight in Bootwatch, personally.

Proposed addition to Radix Bootswatch documentation:

Note: The Bootswatch SCSS will set theme colors and generate corresponding Bootstrap utilities, but it will not change anything that's missing a required utility class.

An example of this is is the navbar background. Bootswatch previews use .bg-* utility classes and data-bs-theme="dark" to achieve the navbar variations. Replicating this requires modifying your theme's template files accordingly.

For more information, see the Bootstrap documentation on navbars, color modes, and utility classes.

Thanks guys for looking into this, I updated the docs with your suggestion:
https://radix.trydrupal.com/radix/understanding-radix/bootswatch

Marking this as Closed.