CSS Variables: allow styling of ng-Bootstrap by their host angular components css file

[redevill]

Feature Request description:

Styling ng-Bootstrap widgets can be a challenge.
Especially with /deep/ ::shadow being deprecated.
By using CSS variables in the bootstrap styling, consumers of the widgets (i.e. Other angular components, with ViewEncapsulation enabled) could then specify override values for these CSS variables.

Just think, in the local CSS for your component, you could specify a CSS variable value for the background color of the ngb-accordion, and it would set it 'accordingly' ;0

See Excerpt below:
https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care?hl=en
"This technique is especially useful for theming Web Components that use Shadow DOM, as custom properties can traverse shadow boundaries. A Web Component author can create an initial design using fallback values, and expose theming “hooks” in the form of custom properties."

[jessycormier]

Wouldn't it be possible for the team to change the component encapsulation mode for the styles and import bootstrap styles in the components scss files for getting the correct rendering.

https://angular.io/api/core/Component#encapsulation

wouldn't this allow us to change the styles without needing use /deep/ ?

[redevill]

Changing the encapsulation mode would, I believe, allow for external changes. But this is akin to using all global variables, and make it quite difficult to keep Global styles from unintended affects. I have also had some "leaking" (CSS values, affecting other components during modal window navigation) issues with my own components where I have set the encapsulation to none.

[jessycormier]

In my opinion I think this is what I would want and expect when using a style framework like Bootstrap :) This way 'themes' can easily downloaded and applied for example.

would it be possible to have it programmatically change the encapsulation?

[CharlyRipp]

This is basically the only reason why I haven't started using this library yet.
I've built a theme framework for our internal shared components at work do this same thing.

What I came up with for now is to

• Disable View Encapsulation
• Import variables at the top of each component's CSS
  • In this case bootstrap/scss/variables
• Create new variables as needed if the core variables aren't granular enough or desire the ability to deviate from the 'theme' per component
  • $my-new-special-var: theme-color("dark") !default;
• Manually scope styling to this component via it's tag
  • This may not be necessary for bootstrap's styling framework

@import '~@ng-bootstrap/ng-bootstrap/scss/variables'; // If the SCSS is copied into this library

ngb-accordion { // Manual scoping (if needed)
   // -- Styling or imports of bootstrap here --
}

What this does is all components are still packaged with a compiled CSS, so you can pick up the library and use it off the shelf.
An application could then override these styles by supplying a slightly more specific selector.
In the global styles.scss, this could be done by wrapping the imports of this libraries SCSS in body.

// -- Set Overrides before import --

body {
  @import '~@ng-bootstrap/ng-bootstrap/scss/bootstrap'
}

or if utilizing within a component, the ::ng-deep selector can be used (until it goes away...)

If overriding variables for bootstrap that you want shared across all components, you can split styles.scss into a _vars.scss, where all your variables are set.
Then styles.scss and all components (as applicable) can import that.

Kind of long-winded, but figured I'd share.

[strizzwald]

Should this be closed? I cannot follow @CharlyRipp's approach, I've checked the @ng-bootstrap node module and the SCSS is not copied into the library. What do we do in this case?

ng-bootstrap version: 11.0.0-beta.1

[redevill]

It has been a couple of years since I first logged this issue. I am now using a higher version of ng-bootstrap in a project that uses scss. I have not explicitly checked that the accordion background can be changed with the newer version setup. I will try and do that, and get back.

[strizzwald]

Thanks @redevill. I have tried this with the latest version of ng-bootstrap. There are no scss theming variables that can be overridden. I've resorted to installing both ng-bootstrap and bootstrap node modules to override the variables. Obviously not great, but I couldn't find any other solutions.

[redevill]

Does not look like anything has changed in the last almost 5 years. It still can't be styled, and the powers at be close these issues without a thought.

The reason I opened this Feature request was to give a legit method by which this need could be addressed, and not the bogus "View Encapsulation Turned off" which is NOT a solution. Equivalent to saying you must use Global variables only! - Ridiculous.

this has been an issue back to 2016 - #1107
Consider using another Library - https://valor-software.com/ngx-bootstrap/#/documentation