Nebular 4.0 will get an update to Theme System, we need your help.

[nnixaa]

Good day Nebular users!
I have a couple of wonderful news for you 🎉

As some of you might already noticed, we are heavily working on something new. 😃 And it's time to reveal our plans and also aks a bit for your help.

Starting from Nebular 4.0 we will be updating Nebular components design and also upgrading Theme System to support various designs in the future!💅

We are looking to simplify the theming process and make it more convenient, obvious and unified across all of the components bringing application based on Nebular to the next level of quality and awesomeness:🚀

• with New Beautiful Design
• more convenient and flexible theming process
• unified components interface
• support of CSS-variables
• and other great features

On the other side, great new things come at a price, and it's Breaking Changes in our case. At the moment we envision the following:

• changes in components HTML structure
• changes in components styles and internal selectors
• changes in Theme Map, unification of variables, removal of unnecessary ones and integration of new
• changes in the color pallet
• unification of component @Inputs and possibly @Ouputs

❗️ That's why we are looking for your feedback. We would really appreciate hearing your experience on the following points:

• Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.
• Do you use multiple run-time Themes?
• Do you customize Nebular styles with custom css? How big are those customizations?

Thanks in advance for your help, let's bring Nebular to the new level together!

P.S. Work in progress is available in the next dev branch. And some more info is in the CHANGELOG file.

[Gocnak]

Exciting stuff, looking forward to it! 🙂

Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.

Yes! We based off of Cosmic for our project to make a more general "Dark" theme, with the color palette fitting our game's overall theming.

Do you use multiple run-time Themes?

Not currently, but we like the idea and would eventually look into supporting two run-time themes for the website. (Probably Dark and Light, as usual).

Do you customize Nebular styles with custom css? How big are those customizations?

Not really. We mainly use the styles.scss file for our customizations. Any extra changes are per-component and usually very minor.

[brysd]

Can't wait!

Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.

Yes we do, we create our own templates and extend the existing 3 templates - mainly for dark themes based on Cosmic. Although we didn't achieve yet customization of the Toastr like with the Cosmic theme - that seems to be more challenging.

Do you use multiple run-time Themes?

Yes we do, this is a feature we definitely like! Awesome work.

Do you customize Nebular styles with custom css? How big are those customizations?

Some but not in large extent. The main adaptations are in themes.scss.

[gemins]

Hi guys! I have a personal panel with login user and role. Is Akveo ngx-admin + Laravel 5.8.
I create views like Models and basic CRUD for reply with any models (Users, roles, or another type).
If you want, you can download from my github. I need update the lasts changes. I create a SH file to reply models with names of model in singular and plural. Is too easy.
Too create a Component to Tables asyc, call the api and fill the rows. Select2 component and somes fixes.
With the template, i working on a new design for change the position of the header and menu. But i working and not finish yet.
If any modification is useful for you just tell me.

[gemins]

Link to my repository: https://github.com/gemins/ngxadmin-lumen-jwtlogin-base
If any component work for the update, just used or tell me.
Bye!

[Dikymon]

Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.

Using Corporate for as a base for the projects we work on.

Do you use multiple run-time Themes?

Never used it, never had a use-case nor customer request.

Do you customize Nebular styles with custom css? How big are those customizations?

The overall layout/style of the components are within 'range'. We probably set around 50-100 of the theme variables per project, and use ::ng-deep style customizations in almost every custom component.

[temp2010]

Will include support for translations

[ZQ-jhon]

Dear nebular teams:
Hi! i'm a nebular user 🙂 , i'm very like this component library, but it's often happend some unexpected case, wish the edition v4.0.0 can improving component performance.
btw, is there some tips with upgrade v4.0.0 ?

[rfreydi]

Hi, first of all thank for the awesomeness you provide with this theme :) !

Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.

Yes we use custom Nebular Themes since our customer have it own designer. We choose Nebular because I used it a lot for my personal project and because of the auth/security module you provide.
We are at the start of the project, but we already overriding these variables :

We also needed to add some new one which was not available and an issue with bootstrap button:disabled but easily corrected :

Do you use multiple run-time Themes?

Yes, our customer want white labelling and the solution found was to enable the run-time theme so it can switch from our theme to the customer theme (if you have any other solution, I take :) )

Do you customize Nebular styles with custom css? How big are those customizations?

Yes, we change the display of inputs, buttons and font

[ilDon]

Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.

Yes, with the following overwrites (we might need more, but so far that's all we have edited):

$nb-enabled-themes: (default);

$nb-themes: nb-register-theme((
  calendar-active-item-bg: #FFDB06,
  calendar-selected-item-bg: #FFDB06,
  checkbox-checked-border-color: #FFDB06,
  color-fg-highlight: #FFDB06,
  color-primary: #FFDB06,
  context-menu-active-bg: #FFDB06,
  context-menu-border: #FFDB06,
  form-control-selected-border-color: #FFDB06,
  link-color-hover: #a4abb3,
  link-color:	#FFDB06,
  menu-submenu-active-border-color: #FFDB06,
  popover-border: #FFDB06,
  radio-checked-border-color: #FFDB06,
  radio-checked-checkmark: #FFDB06,
  route-tabs-selected: #FFDB06,
  smart-table-paging-bg-active: #FFDB06,
  tabs-selected: #FFDB06,
  form-control-border-width: 1px,
  stepper-step-padding: 1em,
  btn-hero-primary-degree: 3deg,
  btn-fg: #424242,
// app wise variables for each theme
  sidebar-header-gap: 2rem,
  sidebar-header-height: initial,
  layout-content-width: 1400px,

  font-main: Roboto,
  font-secondary: Exo,

  switcher-background: #ebeff5,
  switcher-background-percentage: 50%,
  drops-icon-line-gadient: -webkit-linear-gradient(#FFDB06, #FFDB06),

  list-item-border-width: 1px,

  slide-out-container-width: 30%,
  slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
  slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
  slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,

  chart-panel-summary-box-shadow: none,
  chart-panel-summary-background-color: #ecf2f5,
  chart-panel-summary-border-color: #ebeff1,
  chart-panel-summary-border-width: 1px,

  ecommerce-card-border-width: 1px,

  progress-bar-background: linear-gradient(90deg, #FFDB06 0%, #FFDB06 100%),
), default, default);

Do you use multiple run-time Themes?

No, but if it was really easy and possibly not dependent on pre-defined themes, definitely. It would be awesome it we could generate the theme dynamically at run-time based on one or more starting colors.

Do you customize Nebular styles with custom css? How big are those customizations?

No

[87CSY]

Can't wait :)

• Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.

Yes we do. For example,
color-primary: #009CE1,
color-success: #89D31E,
color-info: #82D9FF,
color-warning: #FEA900,
color-danger: #FF0404,
...
scrollbar-fg: color-primary,
scrollbar-bg: unset,
...
And several other changes to meet our own design.

• Do you use multiple run-time Themes?

Yes, we had a dark and light theme. However, after UI redesign there's only one left now.

• Do you customize Nebular styles with custom css? How big are those customizations?

No.

[frankie567]

Thanks for the information 😃

Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.

Yes, we use Corporate theme as a basis. We override quite a lot of the predefined SCSS variables:

themes.scss

$nb-themes: nb-register-theme((
  color-primary: $primary,
  color-primary-hover: $primary-hover,
  color-secondary: $secondary,
  color-fg: $primary,
  color-success: #27ab60,
  color-danger: #c0392b,

  font-size-xlg: 1.5rem,

  header-bg: #fff,
  header-fg: $primary,
  link-color: $primary,
  link-color-hover: $primary-hover,

  header-height: 4rem,

  stepper-accent-color: $secondary,

  form-control-selected-border-color: $primary,

  select-border-width: 1px,

  btn-border-radius: 0.5em,

  context-menu-active-bg: $primary,
  context-menu-border: $primary,

  btn-secondary-bg: $secondary,
  btn-secondary-border: $secondary,

  sidebar-header-gap: 2rem,
  sidebar-header-height: initial,
  sidebar-padding: 0,
  sidebar-width: 5rem,
  sidebar-bg: $primary,
  layout-content-width: 1400px,

  menu-fg: #fff,
  menu-bg: $primary,
  menu-active-fg: #fff,
  menu-active-bg: $secondary,
  menu-submenu-item-border-radius: 0,
  menu-icon-color: #fff,
  menu-icon-active-color: #fff,
  menu-icon-font-size: 2rem,
  menu-icon-margin: 0,
  menu-item-separator: #fff,
), kpi, corporate);

Do you use multiple run-time Themes?

No.

Do you customize Nebular styles with custom css? How big are those customizations?

From time to time, especially nb-card, nb-card-header and nb-card-footer components to change the margins/paddings on specific cases.

[SpiraMira]

• Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.
• Do you use multiple run-time Themes?
• Do you customize Nebular styles with custom css? How big are those customizations?

Posted a separate issue on this, but just thought I'd ask here too: looks like @next requires Angular 8. What about those of us whose client apps will remain on Angular 7 for a while?

[purplenimbus]

id be really happy if there was a theme built using pure bootstrap classes so it would be as simple as compiling your own bootstrap theme to change the look and feel of the app.

[john8329]

Just one thing. Documentation! I found extremely frustrating to use and modify the theme because I had (and still have) no clue on what to look for and how things are organised. Using Nebular for my app is largely a failed experiment mostly because of complications like this.

Thanks for the effort in the theming! I'll look into it again once it's done.

[matyee]

I am just starting a project using Nebular. It looks awesome. I am planning to use the theming system but since v4.0.0-rc.5 is already out I do not want to use the theming system of earlier versions. Do you have any documentation ready how to use the new theming? Something like https://akveo.github.io/nebular/docs/guides/theme-system#nebular-theme-system?

[setrar]

First and foremost, thanks for your wonderful work.

I have never been to Belarus 🇧🇾 but knowing that great team is producing such a nice and open source project and that I have also remotely worked with someone in Minsk put the city on my Cities to visit list.

I teach Angular and provide quick and dirty tutorials based on Avkeo's Documentation to College Kids

https://github.com/CollegeBoreal/Tutoriels/tree/master/3.Angular/B.Theme

For an online client, I base their custom Theme out off the Corporate Theme

☑️ Do you use custom Nebular Themes? Theme example or at least a count of changes (variables changed) is appreciated.

☑️ Do you use multiple run-time Themes? see below source code

☑️ Do you customize Nebular styles with custom css? How big are those customizations?

Tiny i.e. crave.scss file

One great library I like is the Avkeo's @Nebular/Auth, another quick and dirty Tutorial for the students.

https://github.com/CollegeBoreal/Tutoriels/tree/master/3.Angular/A.Auth

It helps me explain the HTTP Interceptors in a module configuration tested again Scala oAuth2 backends. I have yet to test the @Nebular/Security requested by another remote client.

Keep it cool guys and thanks for the great and free work! 👏

[nnixaa]

Many thanks for your feedback and help, this helps us to understand the use cases a lot.

We have just released one of the closes to 4.0.0 releases - 4.0.0-rc.7. It contains a complete set of features as well as a migration guide and updated documentation.

If you are ready to update, we uploaded the next version of docs to https://akveo.github.io/nebular/next/ and the migration guide here https://akveo.github.io/nebular/next/docs/migration/350400-migration. Just use tag @next while migrating Nebular packages, like this ng update @nebular/theme@next, while we are in RC stage.

We would really appreciate hearing your feedback on the update steps, quality of the guide and if you have any questions or complications - please post a comment here #1524.

Thanks again and looking forward to your feedback.

[batousik]

1. Developed custom color palette and changed layout variables
2. Wanted to integrate ckeditor, but stuck at enforcing ckeditor theme inside the editor (nebular themes overwrite everything). Need help to fix it.
3. Using a lot of custom css, due to the lack of knowledge of sass and css mixed with complicated nebula the ming system.

[nnixaa]

Nebular 4 is out! 🎉 Looking forward to your feedback.

• 🚀 Migration guide and what's new https://akveo.github.io/nebular/docs/migration/350400-migration#350--400-nebular-migration
• 📺 Migration discussion Nebular 4.0 migration questions and support #1524

[NileshDabi]

nebular theme is awesome thanks to the team