CODEWITHSUNDEEP
angulartypescriptionic-frameworksass
user17183054
user17183054

Reputation:

provide custom name for color ionic angular

I am new to ionic and angular so I am trying to provide specific color name to one class and export that to all app. I have done this using react but I am not sure how we can do with ionic angular: An example where I have implemented this in react-native

color.js

export default {
  primary: "#fc5c65",
  secondary: "#4ecdc4",
}

and I have used this to different classes like

Button.js

const styles = StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    borderRadius: 25,
  }
})

so How do I implement this structure in ionic angular ? I have color.ts class with

export default {
  primary: '#26316d',
  secondary: '#8995d6',
};

and I am trying to use these color value to scss class

header.page.scss
.header {
    display: flex;
    background: #26316d;  //I want to use primary instead of color code here
}

Upvotes: 0

Views: 441

Answers (1)

Alexis Deprez
Alexis Deprez

Reputation: 575

The accepted answer works well, but I'll add some details about preferred Ionic implementation when working with colors. Default color palette is defined in variables.scss. As you can see, it uses CSS variables to define your colors, their contrast, hint and shade. Later these variables are used by Ionic components with [color] input to define background, foreground and state colors.

By using the same syntax, you can add more colors to your palette :

:root {
  --ion-color-mycolor: #69bb7b;
  --ion-color-mycolor-rgb: 105,187,123;
  --ion-color-mycolor-contrast: #000000;
  --ion-color-mycolor-contrast-rgb: 0,0,0;
  --ion-color-mycolor-shade: #5ca56c;
  --ion-color-mycolor-tint: #78c288;
}

.ion-color-mycolor {
  --ion-color-base: var(--ion-color-mycolor);
  --ion-color-base-rgb: var(--ion-color-mycolor-rgb);
  --ion-color-contrast: var(--ion-color-mycolor-contrast);
  --ion-color-contrast-rgb: var(--ion-color-mycolor-contrast-rgb);
  --ion-color-shade: var(--ion-color-mycolor-shade);
  --ion-color-tint: var(--ion-color-mycolor-tint);
}

Once your color is declared, you can use it for Ionic components :

<ion-header color="mycolor"></ion-header>

Or directly in you (S)CSS files :

.header {
  background: var(--ion-color-mycolor);
  color: var(--ion-color-contrast);
}

There is a tool on Ionic website to generate these variables : https://ionicframework.com/docs/theming/colors#new-color-creator

Upvotes: 1

Related Questions