How to add a new named color in Ionic2?

Ionic Framework ionic-v3
1

I need to add a new named color to Ionic2. If I add a new named color to the existing named colors list in variable.scss file, all screens get blank when I build my app with --prod switch.

// Named Color Variables
// --------------------------------------------------
// Named colors makes it easy to reuse colors on various components.
// It's highly recommended to change the default colors
// to match your app's branding. Ionic uses a Sass map of
// colors so you can add, rename and remove colors as needed.
// The "primary" color is the only required color in the map.

$colors: (
 primary:       #387ef5,
  secondary:     #32db64,
  danger:        #f53d3d,
  light:         #f4f4f4,
  dark:          #222
  // <----- I cannot add a new color here, because if I do this 
  //        all screens get blank when I build my app with `--prod` switch

);

I need new named colors because I want to set my navbar color dynamically by using the color attribute:

<ion-navbar color="{{myTSObject.myColorFromDatabase}}">

Thank you!!

2

Hmm, that’s interesting. I haven’t had a problem with adding a new colour to variables.scss like this:

$colors: (
	primary:    #F78426,
	pridark:	#D5792E, // <-- New Colour
	secondary:  #32db64,
	danger:     #f53d3d,
	light:      #f4f4f4,
	dark:       #222
);

And in a html file I use it as you normally would:

<ion-tabs color="pridark">

Is it possible that your myTSObject.myColorFromDatabase is going out of scope somehow? In a --prod build, are you able to output myTSObject.myColorFromDatabase to the console.log to see if it exists?

3

Can you create production builds with --prod switch?

4

Yes, my production build works with the new colour. See my edit above about console.log and scope.

5

Bind the Ionic property to your variable if you’re using an Ionic component. So [color]="variableName" instead of what you are doing right now. It’s easy to mix Ionic syntax with Angular syntax, but they are not the same. That said, the name of your variable worries me, because if you’re trying to pull the color from a database at runtime, there might be more problems than what you are describing.

6

Nope, not in a --prod build. But in non --prod build my app shows all colors according to my myTSObject.myColorFromDatabase.

7

The name options I give the user to save in the database come from a select component. They are the exact names in my variables.scss file. In a non --prod build it works ok.

8

I noticed that you have added your new color name just under the primary name. I just added only one name under the primary and it works! I am going to try to add more names now… Maybe the position matters!

9

Wow… if that’s the case then there’s definitely a problem with the scss parser. I’m glad you got it to work though. Let me know if adding more colours still works - I’m curious.

Edit: I just tried adding a new colour to the end of the list as you had it, and yep - it breaks! There’s definitely a problem with the parser or something.

1 Like
10

I have just added 1 more name and it works! Now I am going to add all my new twenty named colors.

11

Awesome - I’m glad it’s working for you. Also, see my edit above.

12

Awesome! Thank you for your help!

13

No problem for me to add at the end, don’t forget “,”
$colors: (
primary: #387ef5,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222,
otherlight: #f6f6f6
}

14

And… does this work for you in a production build as cristianguedes stated, using --prod?

15

Sometimes position matters. Sometimes it does not. I have also noticed that quantity matters. Try to add as many color variables as below (and then try to run a --prod build):

   C117CC0:      #117CC0,
  C2a4296:        #2a4296,
  CFF0000:       #FF0000,
  CF01E00:       #F01E00,
  CFF6600:       #FF6600,
  CF66B17:       #F66B17,
  CFF9400:       #FF9400, 
  CFEC500:       #FEC500,
  CFFFF00:       #FFFF00,
  C8CC700:       #8CC700,
  C0FAD00:       #0FAD00,
  C00A3C7:       #00A3C7,
  C0064B5:       #0064B5,
  C0010A5:       #0010A5,
  C6300A5:       #6300A5,
  CC5007C:       #C5007C,
  C000000:       #000,
  CFFFFFF:       #FFF,
  CCCCCCC:       #CCC,
  CDCDCDC:       #DCDCDC

And yep, I am not forgetting “,”.

16

So Cristian, is adding all of these colours failing for you at some point? I try to limit my apps to about 6 colours for the GUI so I don’t have as many in the list as you do. If it’s passing at a certain amount of colours and failing when the list gets too long then I have a feeling this is an issue that has to be raised to the ionic team.

17

Yes, it is BradBurns! I was able to add only 14 additional color variables. If I try to add more than 14, all screens get blank after splash screen (if I run ionic run android --prod). BTW, how can I raise an issue to Ionic team?

18

I’m pretty sure they use their GitHub repository to track issues here:

Don’t forget to search for a similar issue first before posting this as an issue to avoid creating a duplicate.

1 Like
19

Thank you @BradBurns!!

20

You’re welcome, Cristian. :slight_smile: Glad I was able to help.