Changing a theme primary color

Question

I am using Angular 9 with Nebular 5. I want to change the primary color of my theme. According to the site

I could use something like the following:

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

$nb-themes: nb-register-theme((

  color-primary-100: #faf7ff, // <- new primary color
  color-primary-200: #ece3ff,
  color-primary-300: #d5bfff,
  color-primary-400: #b18aff,
  color-primary-500: #a16eff,
  color-primary-600: #7b51db,
  color-primary-700: #5a37b8,
  color-primary-800: #3e2494,
  color-primary-900: #29157a,

  text-basic-color: color-basic-800,
  text-disabled-color: color-basic-600,
), default, default);

I could obviously change the primary color by simply modifying the following line:

color-primary-100: #faf7aa, // <- new primary color

What I dont know is how to generate the remaining colors:

  color-primary-200: #ece3ff,
  color-primary-300: #d5bfff,
  color-primary-400: #b18aff,
  color-primary-500: #a16eff,
  color-primary-600: #7b51db,
  color-primary-700: #5a37b8,
  color-primary-800: #3e2494,
  color-primary-900: #29157a,

Can somebody shed some light on this for me? Since nebular 5 is based on Bootstrap framework, how do I generate these codes?

I am not sure if there is a way to easily generate the levels of those colors, but I just opened an html color codes site and entered the value I wanted for my primary and then just look at lighter / darker code styles near it for the remaining values. — Brian Smith, Jun 28 '20 at 01:09

score 1 · Answer 1 · answered Nov 26 '20 at 11:42

First of all, you need to pick one PRIMARY color for your project. For e.g. its #a16eff (Purple ). Now you need to go to https://maketintsandshades.com/ and fill in your primary color code and hit enter.

You will see many shades for your color. Now you need the set this primary color code which is #a16eff and set it to "color-primary-500".

And "color-primary-100", "color-primary-200" ,"color-primary-300", "color-primary-400" will be the light shades which you can set. "color-primary-100" will be the lightest and further becomes darker till "color-primary-900". "color-primary-900" will be your darkest color.

Here is the format you can use

$nb-themes: nb-register-theme((

  color-primary-100: #faf7ff, // <- lightest shade
  color-primary-200: #ece3ff, // <- light shade
  color-primary-300: #d5bfff, // <- light shade
  color-primary-400: #b18aff, // <- light shade
  color-primary-500: #a16eff, // <- new primary color (main color which defines your UI)
  color-primary-600: #7b51db, // <- Darker Shade
  color-primary-700: #5a37b8, // <- Darker Shade
  color-primary-800: #3e2494, // <- Darker Shade
  color-primary-900: #29157a, // <- Darkest Shade
), default, default);

These extra color shades are automatically used for hover effects, focus effects, boders, active states , etc.

Changing a theme primary color

1 Answers1