Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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
}

>Solution :

You don’t need to create .ts file instead You can create custom.scss and

custom.scss
    $primary: '#26316d',
    $secondary: '#8995d6',

and you can use it by importing to any scss

@import "./custom.scss";

.header {
    display: flex;
    background: $primary;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading