Theme mixin does not switch correctly

[Jonathan002]

Issue type

I'm submitting a ... (check one with "x")

• [ x] bug report
• [ ] feature request
• [ ] question about the decisions made in the repository

Issue description

Current behavior:

Sass mixin nb-theme loads the wrong theme.

Expected behavior:

Sass mixin nb-theme should load the right theme.

Steps to reproduce:

I'm trying to use the mixin to get themes to load correctly in sass.

Setting Starting theme to cosmic:

ThemeModule.ts

@NgModule({
  imports: [
NbThemeModule.forRoot(
    {
      name: 'cosmic',
    }
])

app.component.scss

@include nb-install-component() {
  @debug ('check theme in app.component', nb-theme(card-bg));
}

The log looks like this:

stdin:26 DEBUG: "check theme in app.component", #3d3780
stdin:26 DEBUG: "check theme in app.component", #ffffff

Related code:

insert short code snippets here

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

Package Version

@angular-devkit/architect 0.6.0 @angular-devkit/build-angular 0.6.0 @angular-devkit/build-optimizer 0.6.0 @angular-devkit/core 0.6.0 @angular-devkit/schematics 0.6.0 @ngtools/webpack 6.0.0 @schematics/angular 0.6.0 @schematics/update 0.6.0 rxjs 6.1.0 typescript 2.7.2 webpack 4.6.0

• node: v10.6.0
• npm: 6.1.0 "@nebular/auth": "2.0.0-rc.9", "@nebular/security": "2.0.0-rc.9", "@nebular/theme": "2.0.0-rc.9",

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

It should stay #3d3780 but instead becomes #ffffff, which I'm guessing is from the default theme.

[nnixaa]

Hey @Jonathan002, could you set-up a reproducible example? As far as I can tell it works fine on my side.

[Jonathan002]

Hi @nnixaa, thanks for the reply.

I had just found out now on my end that the functionality does work as intended. I was just mislead by the @debug when inspecting the values as it had an extra emit

I was able to reproduce the @debug log through creating a .scss in the app.component using this repo.

Added styleUrls

@Component({
  selector: 'ngx-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})

app.component.scss

@import './@theme/styles/themes';

@include nb-install-component() {
  // @debug Log:
  // stdin:4 DEBUG: "check theme in app.component", #3d3780
  // stdin:4 DEBUG: "check theme in app.component", #ffffff

  @debug ('check theme in app.component', nb-theme(card-bg));
  :host /deep/ {
    * {
      border: 2px solid red;
      // because of #ffffff from debug, I though the final border-color would be #ffffff but it's using the
      // #3d3780 that was given from the previous emit so in the end its working as intended on a theme change event.
      border: 2px solid nb-theme(card-bg); 
    }
  }
}

Thanks for getting back to me on this. :)

[nnixaa]

Hi @Jonathan002, the thing is that your scss files are processed multiple times depending on how many themes you have enabled in your app. You can control this by using $nb-enabled-themes: (default, dark); variable. Glad you resolved it!