Nebular: Changing nebular main-font dynamically by direction state

[amirpourya]

feature request

Hi nebular team,

I wanna set nebular theme font-main dynamically on direction change...

for example i want something like this:

@include nb-ltr() {
        $nb-themes: nb-register-theme((
         sidebar-header-gap: 2rem,
         sidebar-header-height: initial,
         layout-content-width: 1400px,
         font-main: Roboto,
         font-secondary: Roboto,
         switcher-background: #ebeff5,
         switcher-background-percentage: 50%,
        drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
        ), default, default);
 };

@include nb-rtl() {
        $nb-themes: nb-register-theme((
         sidebar-header-gap: 2rem,
         sidebar-header-height: initial,
         layout-content-width: 1400px,
         font-main: Tahoma,
         font-secondary: Tahoma,
         switcher-background: #ebeff5,
         switcher-background-percentage: 50%,
        drops-icon-line-gadient: -webkit-linear-gradient(#01dbb5, #0bbb79),
        ), default, default);
 };

Is it possible? / Do you have any idea how can i solve this problem?

Thanks.

[nnixaa]

Hi @amirpourya, in this case I would suggest creating two separate Nebular themes, the first one for RTL and the second one for LTR, inherit one from another and change the theme on direction change.

$nb-themes: nb-register-theme((
  font-main: Roboto,
), default, default-ltr);

$nb-themes: nb-register-theme((
  font-main: Tahoma,
), default, default-rtl);

and somewhere in top-level component:

constructor(dirService: NbLayoutDirectionService, themeService: NbThemeService) {
  dirService.onDirectionChange().subscribe((dir: NbLayoutDirection) => {
    if (dir === NbLayoutDirection.LTR) {
      theme.changeTheme('default-ltr');
    } else {
      theme.changeTheme('default-rtl');
    }
  })
}

I haven't tested this code, but I hope it gives you the idea.