CODEWITHSUNDEEP
csstemplatescolorssassionic2
somnathbm
somnathbm

Reputation: 659

How to use SASS color() in Ionic 2 component template?

Ionic 2 makes it very easy to use colour scheme in component template just using keys (e.g. primary)of Ionic's default SASS colour map ($colors). But is there a option to pass in the name of the map, just like it can be done from template SCSS by calling SASS color() function?

Suppose I write multiple SASS maps, for the sake of exploring with different colour schemes , naming differently than $colors, how would I reference a particular colour key from a particular SASS colour map from the component template HTML?

From component SCSS, there is no such problem, because I can use SASS's color() function there to pass in my custom color map.

What I'm trying to say is this is the Ionic 2 variable.scss file

variables.scss

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

I can access the colour key for instance 'primary' from this map in the component template HTML like :

some-component.html

<ion-navbar color="primary"></ion-navbar>

Now if I write more SASS maps in variables.scss like :

variables.scss (modified)

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

$bluegray-lightgreen: (
  primary:         #546e7a,
  secondary:       #76ff03,
  primary-light:   #819ca9,
  primary-dark:    #29434e,
  secondary-light: #b0ff57,
  secondary-dark:  #32cb00,
  primary-text:    #ffffff,
  secondary-text:  #000000
);

How would I be able to use 'primary' colour key from $bluegray-lightgreen map in the component template HTML.

Note : I know all the workarounds for this, but I want to know if exactly this is possible. Someone may want do this as for colour scheme config file and may want to easily switch different colour maps just from the template.

Upvotes: 3

Views: 2770

Answers (1)

timtheguy
timtheguy

Reputation: 141

Use map-get($bluegray-lightgreen, primary) to access the primary color key from your map.

For example, in styling a component of your application, you may implement the following class:

.blue-bg{
    background-color: map-get($bluegray-lightgreen, primary);
}

And refer to the class in your component to set the color from the .scss stylesheet:

<ion-navbar class="blue-bg"></ion-navbar>


You can define a class to use in your component, then use this color in your actual component.

See this forum post for more options as to color the navbar component from the stylesheet.

Upvotes: 5

Related Questions