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


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:

Default theme

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

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!


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:


  <table class="table table-hover">

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:


  @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:

      <td>Product name</td>

Hope it helps, cheers!

Leave a Reply

(*) Required, Your email will not be published