[Fixed] Change Bootstrap table font colors when swapping Nebular theme

Issue

I’m using Akveo Nebular UI library and Bootstrap in an Angular application and everything looks perfect until I change the theme at runtime. Basically, the Bootstrap tables don’t change the font color so they’re unreadable. For example, this is how a table looks like with the default theme:

And this is the same table when I switch to dark theme:

I followed Nebular’s article found here and I modified the app.component.scss to add the following lines to customize the Bootstrap table styles when the theme is changed:

@import '../../../../themes';

@include nb-install-component {
  table.table {
    font-family: nb-theme(font-family-primary);
    color: nb-theme(text-basic-color);
  }
}

Hovever, it doesn’t change anything. I’ve realized that, if I modify the SCSS file of a component that has any table in it, the new styles are applied. But I have tables in more than 15 components, so it would be a pain to add the code above to each of them and maintain possible style changes.

Any suggestion? Thanks!

Solution

What I did to solve this problem was to create a custom table component that wraps a Bootstrap table inside. In this way, I can use nb-install-component in its SCSS file and Nebular adds the right classes when I switch the theme. Summing it up:

1) Create a CustomTableComponent

2) The HTML template will have a Bootstrap table inside. To be able to use it as a normal table, use <ng-content>. The code would be something like:

custom-table.component.html

  <table class="table table-hover">
    <ng-content></ng-content>
  </table>

3) In the component styles file, wrap everything with nb-install-component and modify the needed rules to adapt to the theme switch (in our case, just the color is necessary). Here’s how I have it:

custom-table.component.scss

  @import '../../themes';

  @include nb-install-component {
    table.table {
        font-family: nb-theme(font-family-primary);
        color: nb-theme(text-basic-color);  /* This will change the color when you switch the theme */
    }
  }

4) Now, use the new app-custom-table component instead the HTML table tag:

<app-custom-table>
  <thead>
    <tr>
      <th>#Id</th>
      <th>Name</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>101</td>
      <td>Product name</td>
      <td>2,000€</td>
    </tr>
  </tbody>
</app-custom-table>

Hope it helps, cheers!