Change Bootstrap table font colors when swapping Nebular theme

Question

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!

Do you use `nb-layout`? It is responsible for theme switching. If yes, make sure that body element has a theme class for the current theme — ArtemRomanovsky, Dec 27 '19 at 12:15
Hi! Yes, I use `nb-layout` in the main component. When I change the theme, the `body` tag gets a `nb-theme-XXXX` class. Anyway, I found a solution for my needs, I'll post the answer when I have a little time. — Fel, Dec 27 '19 at 13:01

score 4 · Accepted Answer · answered Apr 30 '20 at 07:52

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!

score 0 · Answer 2 · answered Mar 22 '21 at 23:33

I had the exact same problem. In general, I found Nebular to be very restrictive and if you want to anything other than what is given out of box you should be prepared to spend hours because the documentation is very limited, and peers in this project seem to be very stingy to provide any assistance. Note that Nebular recommends posting stack overflow questions, however these are often downvoted and not answered.

I took a different approach. In my themes.scss located at app > @theme, I first tried to add the code inside @include nb-install-component() {}, however this did not work at all, and i'm not sure why.

Second, I just pasted the style code nb-theme(text-basic-color) outside of any tags at the bottom of the file. This caused the custom css to trigger, however it did not work properly because it was using the base/default style which is black. When switching the theme, the color did not switch to white for dark.

I ended up with a rule for each theme .nb-theme-dark .table { font-family: nb-theme(font-family-primary); color: white !important; /* This will change the color when you switch the theme */ }

I did not understand why this was so difficult to get to work and why on occasion css is not picked up, but due to not many people willing to help my solution is to work around and find another way.

Change Bootstrap table font colors when swapping Nebular theme

2 Answers2