Custom themes overrides default themes CSS variables within nb-install-component()
- 主要语言
- TypeScript
- 星标
- 8.1k
- 派生
- 1.5k
- PR 合并指标
- 30 天内没有已合并 PR
描述
### Issue type
**I'm submitting a ...** (check one with "x")
* [ X] bug report
* [ ] feature request
### Issue description
**Current behavior:**
I have a custom theme installed, I want to change a nb-icon color depending on theme selected.
The nb-install-component() SCSS function works as expected but it use the custom CSS variables of the custom theme on top, overriding other default theme variables (text-basic-color) (default, dark, cosmic).
When I pick the custom theme using NbThemeService and swipe back to a default theme it works as expected.
In resume it overrides CSS rules while you havent selected it (custom theme)
**Expected behavior:**
Custom themes variable values within nb-install-component() shouldnt override the other default themes
**Steps to reproduce:**
Install a custom theme
`$nb-themes: nb-register-theme((), custom-theme, dark);`
Register it on the module
`NbThemeModule.forRoot({name: 'custom-theme'})`
(I think the problem comes from the code above)
Use nb-install-component()
```
@import '../../../../../../../assets/styles/themes/themes.scss';
@include nb-install-component {
div {
border: 8px solid nb-theme(text-basic-color);
border-color: nb-theme(text-basic-color) transparent transparent transparent;
}
}
```
Now the custom theme will override the CSS variables registered placing theme on top.
Example:
Theme selected: Dark
the `
Once you change to the custom theme and swipe back to the dark theme, just on this case, CSS rules will work as expected
### Other information:
**npm, node, OS, Browser**
I know this is a weird bug hard to find, I have a feeling the problem comes when you register the custom theme on the NbThemeModule({ name: 'custom-theme' }), I think this makes the custom theme as default overriding other rules.
**Angular, Nebular**
Angular 8.x.x
Nebular 4.x.x
```
贡献指南
评估
这个 Issue 还没有评估数据。