2

I set up a project using ng new and then followed the instructions to add nebular to an existing app. I defaulted to cosmic. This has resulting in the following files. So when I set the theme to cosmic or default in the NbThemeModule.forRoot(), it works, but 'corporate' does not. The resulting screen is all smashed together at the top.

Can someone tell me what I need to do to get the 'corporate' to work? If you know of any good tutorials on the themes for nebular, that would be great. I am completely clueless.

app.module.ts:

    import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeScreenComponent } from './home-screen/home-screen.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NbThemeModule, NbLayoutModule, NbSidebarModule } from '@nebular/theme';

@NgModule({
  declarations: [
    AppComponent,
    HomeScreenComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    NbThemeModule.forRoot({ name: 'cosmic' }),
    NbLayoutModule,
    NbSidebarModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

theme.scss:

    @import '~@nebular/theme/styles/theming';
@import '~@nebular/theme/styles/themes/cosmic';

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-bg: #4ca6ff,
), cosmic, cosmic);

angular.json:

            "styles": [
          "src/styles.scss"
        ],
DenisMP
  • 973
  • 2
  • 16
  • 31

4 Answers4

1

Wrap your components inside nb-layout and nb-layout-column

for example

<nb-layout>
  <nb-layout-column>
  <input type="text" nbInput fullWidth status="basic" placeholder="Default">
</nb-layout-column>
</nb-layout>
malvern dongeni
  • 647
  • 4
  • 10
0

I finally got the 'corporate' to work as indicated below. I have so much to learn about this stuff. I hope this might beginners like myself. I modified the the themes.scss like this:

   $nb-themes: nb-register-theme((
  // add your variables here like:
  // color-bg: #4ca6ff,
), cosmic, cosmic);

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-bg: #4ca6ff,
), default , default);

$nb-themes: nb-register-theme((
  // add your variables here like:
  // color-bg: #4ca6ff,
), corporate , corporate);

and I added this to the angular.json file:

            "styles": [
          "src/styles.scss",
          "node_modules/@nebular/theme/styles/prebuilt/corporate.css",
          "node_modules/@nebular/theme/styles/prebuilt/cosmic.css",
          "node_modules/@nebular/theme/styles/prebuilt/default.css"
        ],
DenisMP
  • 973
  • 2
  • 16
  • 31
0

From your original question, the only thing to do is to rename the cosmic mention to corporate throughout the code parts you posted. Here is a working example: https://stackblitz.com/edit/github-updvbd?file=src/themes.scss

Dmitry Nehaychik
  • 153
  • 1
  • 5
0

You can simply change the theme by changing the ngx-admin/src/app/@theme/theme.module.ts file line 85 change 

..NbThemeModule.forRoot(
      {
        name: 'corporate', // change here it can be default, corporate, cosmic or dark
      },
      [ DEFAULT_THEME, COSMIC_THEME, CORPORATE_THEME, DARK_THEME ],
    ).provider

For further information please visit here https://akveo.github.io/nebular/docs/design-system/changing-theme#change-current-theme It works with lates version.

Dumb
  • 89
  • 2